@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">

         <!-- Small boxes (Stat box) -->
         {{-- <div class="row">
            <div class="col-md-3 col-sm-6 col-12">
               <div class="info-box">
                  <span class="info-box-icon bg-primary"><i class="far fa-star"></i></span>   
                  <div class="info-box-content">
                     <span class="info-box-text">Teknisi</span>
                     <span class="info-box-number">{{$teknisi}}</span>
                  </div>
               </div>
            </div>

            <div class="col-md-3 col-sm-6 col-12">
               <div class="info-box">
                  <span class="info-box-icon bg-info"><i class="far fa-user"></i></span>   
                  <div class="info-box-content">
                     <span class="info-box-text">Total Order</span>
                     <span class="info-box-number">{{$orders->count()}}</span>
                  </div>
               </div>
            </div>

            <div class="col-md-3 col-sm-6 col-12">
               <div class="info-box">
                  <span class="info-box-icon bg-success"><i class="far fa-user"></i></span>   
                  <div class="info-box-content">
                     <span class="info-box-text">Progress Order</span>
                     <span class="info-box-number">{{$onProgress}}</span>
                  </div>
               </div>
            </div>

            <div class="col-md-3 col-sm-6 col-12">
               <div class="info-box">
                  <span class="info-box-icon bg-dark"><i class="far fa-file"></i></span>   
                  <div class="info-box-content">
                     <span class="info-box-text">Done Order</span>
                     <span class="info-box-number">{{$onDone}}</span>
                  </div>
               </div>
            </div>
            
         </div> --}}

         <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/' .$kordinator->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">{{$kordinator->nama}}</h4>
                    <h6 class="widget-user-desc">{{$kordinator->area}}</h6>
                  </div>
                  <div class="card-footer p-0">
                    <ul class="nav flex-column">
                      <li class="nav-item">
                        <a href="#" class="nav-link">
                          Teknisi <span class="float-right badge bg-primary">{{$teknisi}}</span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="#" class="nav-link">
                          Total Order <span class="float-right badge bg-info">{{$orders->count()}}</span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="#" class="nav-link">
                          Progress Order <span class="float-right badge bg-success">{{$onProgress}}</span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="#" class="nav-link">
                          Complete Order <span class="float-right badge bg-danger">{{$onDone}}</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">Kode Referral</h3>
    
                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                      </button>
                    </div>
                    <!-- /.card-tools -->
                  </div>
                  <!-- /.card-header -->
                  <div class="card-body">
                     <div class="form-group row">
                        <div class="col-12">
                           <input class="form-control" type="text" value="{{$link_kodereferral}}" id="myInput" readonly>
                        </div>
                       <div class="col-12">
                        <button class="btn btn-info btn-block mt-2" onclick="copyToClipboard()">
                           <i class="fa fa-copy"></i> Copy
                        </button>
                       </div>
                        {{-- {{$kordinator->kode_referral}} --}}
                           
                     </div>
                     
                  </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

@push('kode-referral')
   <script>
      function copyToClipboard() {
         /* Get the text field */
         var copyText = document.getElementById("myInput");

         /* Select the text field */
         copyText.select();
         copyText.setSelectionRange(0, 99999); /* For mobile devices */

         /* Copy the text inside the text field */
         document.execCommand("copy");

         /* Alert the copied text */
         // alert("Copied the text: " + copyText.value);
         $(document).ready(function() {
            toastr.success("Succesfully copy to clipboard");
         })
      }
   </script>
@endpush