@extends('layout.app')

@section('title', "Dashboard")

@section('content')
<div class="content-wrapper">
   <!-- Content -->

   <div class="container-xxl flex-grow-1 container-p-y">
      <div class="row">
         <div class="col-12 order-1 order-md-1 order-lg-1 mb-4">
            <div class="card">
               <div class="row row-bordered g-0">
                  <div class="col-md-12">
                     <h5 class="card-header m-0 me-2 pb-3">Success & Unsuccess Call Rate per-15 minutes</h5>
                     <div id="data-callrateperday" class="px-2"></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-md-12 mb-4">
            <h4>Success Rate by-Trunk</h4>
         </div>
         <div class="col-md-6 mb-3">
            <div class="card">
               <div class="card-body">
                  <div class="card-title d-flex align-items-start justify-content-between">
                     <h5>Trunk TT</h5>
                  </div>
                  <div id="data-enum-tt"></div>
               </div>
            </div>
         </div>
         <div class="col-md-6 mb-3">
            <div class="card">
               <div class="card-body">
                  <div class="card-title d-flex align-items-start justify-content-between">
                     <h5>Trunk BRIDGEVOICE</h5>
                  </div>
                  <div id="data-enum-bridgevoice"></div>
               </div>
            </div>
         </div>
         <div class="col-md-6 mb-3">
            <div class="card">
               <div class="card-body">
                  <div class="card-title d-flex align-items-start justify-content-between">
                     <h5>Trunk MSC</h5>
                  </div>
                  <div id="data-enum-msc"></div>
               </div>
            </div>
         </div>
         <div class="col-md-6 mb-3">
            <div class="card">
               <div class="card-body">
                  <div class="card-title d-flex align-items-start justify-content-between">
                     <h5>Trunk TELINSG</h5>
                  </div>
                  <div id="data-enum-telinsg"></div>
               </div>
            </div>
         </div>
         <div class="col-md-6 mb-3">
            <div class="card">
               <div class="card-body">
                  <div class="card-title d-flex align-items-start justify-content-between">
                     <h5>Trunk ANN</h5>
                  </div>
                  <div id="data-enum-ann"></div>
               </div>
            </div>
         </div>
         <div class="col-md-6 mb-3">
            <div class="card">
               <div class="card-body">
                  <div class="card-title d-flex align-items-start justify-content-between">
                     <h5>Trunk NPL</h5>
                  </div>
                  <div id="data-enum-npl"></div>
               </div>
            </div>
         </div>
         <div class="col-md-6 mb-3">
            <div class="card">
               <div class="card-body">
                  <div class="card-title d-flex align-items-start justify-content-between">
                     <h5>Trunk TELINHK</h5>
                  </div>
                  <div id="data-enum-telinhk"></div>
               </div>
            </div>
         </div>
         <div class="col-md-6 mb-3">
            <div class="card">
               <div class="card-body">
                  <div class="card-title d-flex align-items-start justify-content-between">
                     <h5>Trunk TELIN_GP_SG</h5>
                  </div>
                  <div id="data-enum-telingpsg"></div>
               </div>
            </div>
         </div>
         <div class="col-md-6 mb-3">
            <div class="card">
               <div class="card-body">
                  <div class="card-title d-flex align-items-start justify-content-between">
                     <h5>Trunk TELIN_GP_HK</h5>
                  </div>
                  <div id="data-enum-telingphk"></div>
               </div>
            </div>
         </div>
         <div class="col-md-6 mb-3">
            <div class="card">
               <div class="card-body">
                  <div class="card-title d-flex align-items-start justify-content-between">
                     <h5>Trunk TELIN_IG_SG</h5>
                  </div>
                  <div id="data-enum-telinigsg"></div>
               </div>
            </div>
         </div>
         <div class="col-md-6 mb-3">
            <div class="card">
               <div class="card-body">
                  <div class="card-title d-flex align-items-start justify-content-between">
                     <h5>Trunk TELIN_IG_HK</h5>
                  </div>
                  <div id="data-enum-telinighk"></div>
               </div>
            </div>
         </div>
         <div class="col-md-6 mb-3">
            <div class="card">
               <div class="card-body">
                  <div class="card-title d-flex align-items-start justify-content-between">
                     <h5>Trunk TELIN_IS_SG</h5>
                  </div>
                  <div id="data-enum-telinissg"></div>
               </div>
            </div>
         </div>
         <div class="col-md-6 mb-3">
            <div class="card">
               <div class="card-body">
                  <div class="card-title d-flex align-items-start justify-content-between">
                     <h5>Trunk TELIN_IS_HK</h5>
                  </div>
                  <div id="data-enum-telinishk"></div>
               </div>
            </div>
         </div>
         <div class="col-md-6 mb-3">
            <div class="card">
               <div class="card-body">
                  <div class="card-title d-flex align-items-start justify-content-between">
                     <h5>Trunk TELIN_IP_SG</h5>
                  </div>
                  <div id="data-enum-telinipsg"></div>
               </div>
            </div>
         </div>
         <div class="col-md-6 mb-3">
            <div class="card">
               <div class="card-body">
                  <div class="card-title d-flex align-items-start justify-content-between">
                     <h5>Trunk TELIN_IP_HK</h5>
                  </div>
                  <div id="data-enum-teliniphk"></div>
               </div>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-12 order-1 order-md-1 order-lg-1 mb-4">
            <div class="card">
               <div class="row row-bordered g-0">
                  <div class="col-md-12">
                     <h5 class="card-header m-0 me-2 pb-3">Average Conversation</h5>
                     <div style="width: 100%;overflow: auto">
                        <div id="data-averageconv" class="px-2"></div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <hr class="divider mt-4" />
      <div class="col-12 order-2">
         <div class="row">
            <div class="col-md-12 mb-4">
               <h4>Incoming & Outgoing Traffic by-Trunk</h4>
            </div>
         </div>
         <div class="row">
            <div class="col-lg-6 col-md-12 col-6 mb-4">
               <div class="card">
                  <div class="card-body">
                     <div class="card-title d-flex align-items-start justify-content-between">
                        <h5>Trunk TT</h5>
                     </div>
                     <div style="overflow: auto;width: 100%;">
                        <div id="data-tt"></div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-6 col-md-12 col-6 mb-4">
               <div class="card">
                  <div class="card-body">
                     <div class="card-title d-flex align-items-start justify-content-between">
                        <h5>Trunk BRIDGEVOICE</h5>
                     </div>
                     <div style="overflow: auto;width: 100%;">
                        <div id="data-bridgevoice"></div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-6 col-md-12 col-6 mb-4">
               <div class="card">
                  <div class="card-body">
                     <div class="card-title d-flex align-items-start justify-content-between">
                        <h5>Trunk MSC</h5>
                     </div>
                     <div style="overflow: auto;width: 100%;">
                        <div id="data-msc"></div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-6 col-md-12 col-6 mb-4">
               <div class="card">
                  <div class="card-body">
                     <div class="card-title d-flex align-items-start justify-content-between">
                        <h5>Trunk TELINSG</h5>
                     </div>
                     <div style="overflow: auto;width: 100%;">
                        <div id="data-telinsg"></div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-6 col-md-12 col-6 mb-4">
               <div class="card">
                  <div class="card-body">
                     <div class="card-title d-flex align-items-start justify-content-between">
                        <h5>Trunk ANN</h5>
                     </div>
                     <div style="overflow: auto;width: 100%;">
                        <div id="data-ann"></div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-6 col-md-12 col-6 mb-4">
               <div class="card">
                  <div class="card-body">
                     <div class="card-title d-flex align-items-start justify-content-between">
                        <h5>Trunk NPL</h5>
                     </div>
                     <div style="overflow: auto;width: 100%;">
                        <div id="data-npl"></div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-6 col-md-12 col-6 mb-4">
               <div class="card">
                  <div class="card-body">
                     <div class="card-title d-flex align-items-start justify-content-between">
                        <h5>Trunk TELINHK</h5>
                     </div>
                     <div style="overflow: auto;width: 100%;">
                        <div id="data-telinhk"></div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-6 col-md-12 col-6 mb-4">
               <div class="card">
                  <div class="card-body">
                     <div class="card-title d-flex align-items-start justify-content-between">
                        <h5>Trunk TELIN_GP_SG</h5>
                     </div>
                     <div style="overflow: auto;width: 100%;">
                        <div id="data-telingpsg"></div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-6 col-md-12 col-6 mb-4">
               <div class="card">
                  <div class="card-body">
                     <div class="card-title d-flex align-items-start justify-content-between">
                        <h5>Trunk TELIN_GP_HK</h5>
                     </div>
                     <div style="overflow: auto;width: 100%;">
                        <div id="data-telingphk"></div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-6 col-md-12 col-6 mb-4">
               <div class="card">
                  <div class="card-body">
                     <div class="card-title d-flex align-items-start justify-content-between">
                        <h5>Trunk TELIN_IG_SG</h5>
                     </div>
                     <div style="overflow: auto;width: 100%;">
                        <div id="data-telinigsg"></div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-6 col-md-12 col-6 mb-4">
               <div class="card">
                  <div class="card-body">
                     <div class="card-title d-flex align-items-start justify-content-between">
                        <h5>Trunk TELIN_IG_HK</h5>
                     </div>
                     <div style="overflow: auto;width: 100%;">
                        <div id="data-telinighk"></div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-6 col-md-12 col-6 mb-4">
               <div class="card">
                  <div class="card-body">
                     <div class="card-title d-flex align-items-start justify-content-between">
                        <h5>Trunk TELIN_IS_SG</h5>
                     </div>
                     <div style="overflow: auto;width: 100%;">
                        <div id="data-telinissg"></div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-6 col-md-12 col-6 mb-4">
               <div class="card">
                  <div class="card-body">
                     <div class="card-title d-flex align-items-start justify-content-between">
                        <h5>Trunk TELIN_IS_HK</h5>
                     </div>
                     <div style="overflow: auto;width: 100%;">
                        <div id="data-telinishk"></div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-6 col-md-12 col-6 mb-4">
               <div class="card">
                  <div class="card-body">
                     <div class="card-title d-flex align-items-start justify-content-between">
                        <h5>Trunk TELIN_IP_SG</h5>
                     </div>
                     <div style="overflow: auto;width: 100%;">
                        <div id="data-telinipsg"></div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-6 col-md-12 col-6 mb-4">
               <div class="card">
                  <div class="card-body">
                     <div class="card-title d-flex align-items-start justify-content-between">
                        <h5>Trunk TELIN_IP_HK</h5>
                     </div>
                     <div style="overflow: auto;width: 100%;">
                        <div id="data-teliniphk"></div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset("custom/dashboard/dashboardFull.js") }}"></script>
{{-- <script src="{{ asset("custom/dashboard/income.js") }}"></script>
<script src="{{ asset("custom/dashboard/successrate.js") }}"></script>
<script src="{{ asset("custom/dashboard/average-conversation.js") }}"></script> --}}
@endsection
