@extends('layout.main')

@section('container')
      <!-- Page Content-->
      <div class="page-content">
        <div class="container-fluid">
            <!-- Page-Title -->
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-title-box">
                        <div class="row">
                            <div class="col">
                                <h4 class="page-title">Overview</h4>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="javascript:void(0);">PMS</a></li>
                                    <li class="breadcrumb-item active">Dashboard</li>
                                </ol>
                            </div><!--end col-->
                            <div class="col-auto align-self-center">
                                <a href="#" class="btn btn-sm btn-outline-primary" id="Dash_Date">
                                    <span class="day-name" id="Day_Name">Today:</span>&nbsp;
                                    <span class="" id="Select_date">Jan 11</span>
                                    <i data-feather="calendar" class="align-self-center icon-xs ms-1"></i>
                                </a>
                                <a href="#" class="btn btn-sm btn-outline-primary">
                                    <i data-feather="download" class="align-self-center icon-xs"></i>
                                </a>
                            </div><!--end col-->  
                        </div><!--end row-->                                                              
                    </div><!--end page-title-box-->
                </div><!--end col-->
            </div><!--end row-->
            <!-- end page title end breadcrumb -->
            
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col">                      
                                    <h4 class="card-title">Revenu Status</h4>                      
                                </div><!--end col-->
                                <div class="col-auto"> 
                                    <div class="dropdown">
                                        <a href="#" class="btn btn-sm btn-outline-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                           This Month<i class="las la-angle-down ms-1"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a class="dropdown-item" href="#">Today</a>
                                            <a class="dropdown-item" href="#">Last Week</a>
                                            <a class="dropdown-item" href="#">Last Month</a>
                                            <a class="dropdown-item" href="#">This Year</a>
                                        </div>
                                    </div>               
                                </div><!--end col-->
                            </div>  <!--end row-->                                  
                        </div><!--end card-header-->
                        <div class="card-body"> 
                            <div class="">
                                <div id="Revenu_Status" class="apex-charts"></div>
                            </div>                                                                                                                          
                        </div><!--end card-body--> 
                    </div><!--end card-->  
                    <div class="row">
                        <div class="col-12 col-lg-6 col-xl"> 
                            <div class="card">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col text-center">                                                                        
                                            <span class="h4">$24,500</span>      
                                            <h6 class="text-uppercase text-muted mt-2 m-0">Weekly Sales</h6>                
                                        </div><!--end col-->
                                    </div> <!-- end row -->
                                </div><!--end card-body-->
                            </div> <!--end card-body-->                     
                        </div><!--end col-->
                        <div class="col-12 col-lg-6 col-xl"> 
                            <div class="card">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col text-center">                                                                        
                                            <span class="h4">520</span>      
                                            <h6 class="text-uppercase text-muted mt-2 m-0">Orders Placed</h6>                
                                        </div><!--end col-->
                                    </div> <!-- end row -->
                                </div><!--end card-body-->
                            </div> <!--end card-body-->                     
                        </div><!--end col-->
                        <div class="col-12 col-lg-6 col-xl"> 
                            <div class="card">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col text-center">                                                                        
                                            <span class="h4">82.8%</span>      
                                            <h6 class="text-uppercase text-muted mt-2 m-0">Task Jobs</h6>                
                                        </div><!--end col-->
                                    </div> <!-- end row -->
                                </div><!--end card-body-->
                            </div> <!--end card-body-->                     
                        </div><!--end col-->
                        <div class="col-12 col-lg-6 col-xl"> 
                            <div class="card">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col text-center">                                                                        
                                            <span class="h4">$80.5</span>      
                                            <h6 class="text-uppercase text-muted mt-2 m-0">Avg. Value</h6>                
                                        </div><!--end col-->
                                    </div> <!-- end row -->
                                </div><!--end card-body-->
                            </div> <!--end card-->                     
                        </div><!--end col-->                                
                    </div><!--end row--> 
                </div><!-- end col--> 
                                             
            </div><!--end row-->
            <div class="row">
                <div class="col-lg-3">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Tasks</h4>
                        </div><!--end card-header-->
                        <div class="card-body">
                            <div class="">
                                <div id="apex_pie1" class="apex-charts"></div>
                            </div>                                        
                        </div><!--end card-body-->
                    </div><!--end card-->
                </div><!--end col-->                                             
                <div class="col-lg-3">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Certificates</h4>
                        </div><!--end card-header-->
                        <div class="card-body">
                            <div class="">
                                <div id="apex_pie2" class="apex-charts"></div>
                            </div>                                        
                        </div><!--end card-body-->
                    </div><!--end card-->
                </div><!--end col-->  
                <div class="col-lg-3">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Safety</h4>
                        </div><!--end card-header-->
                        <div class="card-body">
                            <div class="">
                                <div id="apex_pie3" class="apex-charts"></div>
                            </div>                                        
                        </div><!--end card-body-->
                    </div><!--end card-->
                </div><!--end col-->  
                <div class="col-lg-3">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Purchases</h4>
                        </div><!--end card-header-->
                        <div class="card-body">
                            <div class="">
                                <div id="apex_pie4" class="apex-charts"></div>
                            </div>                                        
                        </div><!--end card-body-->
                    </div><!--end card-->
                </div><!--end col-->  
            </div><!--end row-->
          
        </div><!-- container -->

        <footer class="footer text-center text-sm-start">
            &copy; <script>
                document.write(new Date().getFullYear())
            </script> PT. Pelayaran Bahtera Adhiguna <span class="text-muted d-none d-sm-inline-block float-end">Crafted with <i
                    class="mdi mdi-heart text-danger"></i> by PT. ATA</span>
        </footer><!--end footer-->
    </div>
    <!-- end page content -->
   
@endsection