@extends('layouts.app-2')
@section('title')
    Dashboard
@endsection
@section('content')

   <!-- Content Header (Page header) -->
   <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Dashboard</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Dashboard </li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
   </div>
    <!-- /.content-header -->

    <!-- Main content -->
   <section class="content">
      <div class="container-fluid">
         <div class="row">
            <div class="col-md-7">
               <div class="card card-widget widget-user-2">
                  <!-- Add the bg color to the header using any of the bg-* classes -->
                  <div class="widget-user-header bg-primary">
                    <div class="widget-user-image">
                     <img style=" object-fit:cover; height:65px;width:65px" class="img-circle"
                        src="{{asset('storage/' .$teknisi->foto_diri)}}"
                        alt="User profile picture">
                      {{-- <img class="img-circle elevation-2" src="../dist/img/user7-128x128.jpg" alt="User Avatar"> --}}
                    </div>
                    <!-- /.widget-user-image -->
                    <h4 class="widget-user-username fw-bold">{{$teknisi->nama}}</h4>
                    <h6 class="widget-user-desc">{{$teknisi->area}}</h6>
                  </div>
                  <div class="card-footer p-0">
                    <ul class="nav flex-column">
                      
                      <li class="nav-item">
                        <a href="#" class="nav-link">
                          Total Order <span class="float-right badge bg-info">{{$teknisi->orders->count()}}</span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="#" class="nav-link">
                          Progress Order <span class="float-right badge bg-success">{{$teknisi->orders->where('status', 5)->count()}}</span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="#" class="nav-link">
                          Complete Order <span class="float-right badge bg-danger">{{$teknisi->orders->where('status', 6)->count()}}</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
            </div>
            <div class="col-md-5">
               {{-- @if ($orderBaru)
                  <div class="card bg-warning">
                     <div class="card-header">
                     <h3 class="card-title">Good news!</h3>
      
                     <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                        </button>
                     </div>
                     <!-- /.card-tools -->
                     </div>
                     <!-- /.card-header -->
                     <div class="card-body">
                      You have new Job Order, <a href="{{route('kordinator.inbox')}}">lets go!</a>
                     </div>
                     <!-- /.card-body -->
                  </div>
               @endif --}}
               
               <div class="card card-primary">
                  <div class="card-header">
                    <h3 class="card-title">Kordinator</h3>
    
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                      </button>
                    </div>
                  </div>
                  <div class="card-body">
                     <h4>{{$teknisi->kordinator->nama}}</h4>
                     
                  </div>
                  <!-- /.card-body -->
               </div>

               <div id="carouselExampleControls" class="carousel slide rounded" data-ride="carousel">
                  <ol class="carousel-indicators">
                     <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                     <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                     <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                   </ol>
                  <div class="carousel-inner">
                    <div class="carousel-item active">
                      <img class="d-block w-100" src="{{asset('lte/dist/img/kacamata-safety.jpg')}}" style="height: 220px; object-fit:cover" alt="First slide">
                      <div class="carousel-caption d-none d-md-block">
                        <h5 class="font-weight-bold">Example Ad</h5>
                        <p>Fitur iklan ini masih dalam tahap pengembangan.</p>
                      </div>
                    </div>
                    <div class="carousel-item">
                      <img class="d-block w-100" src="{{asset('lte/dist/img/toolbox.jpg')}}" style="height: 220px; object-fit:cover" alt="Second slide">
                      <div class="carousel-caption d-none d-md-block">
                        <h5 class="font-weight-bold">Example Ad</h5>
                        <p>Fitur iklan ini masih dalam tahap pengembangan.</p>
                      </div>
                    </div>
                    <div class="carousel-item">
                      <img class="d-block w-100" src="{{asset('lte/dist/img/sepatu-safety.jpg')}}" style="height: 220px; object-fit:cover" alt="Third slide">
                      <div class="carousel-caption d-none d-md-block">
                        <h5 class="font-weight-bold">Example Ad</h5>
                        <p>Fitur iklan ini masih dalam tahap pengembangan.</p>
                      </div>
                    </div>
                  </div>
                  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                  </a>
                  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                  </a>
                </div>
            </div>
         </div>
      </div><!-- /.container-fluid -->
   </section>
    <!-- /.content --> 
@endsection