@extends('layouts.app-2')
@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">Client</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">Client </li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
   </div>
    <!-- /.content-header -->

   <section class="content">
      <div class="container-fluid">
         <div class="row">
            <div class="col-md-3">

            <!-- Profile Image -->
            <div class="card  card-outline">
               <div class="card-body box-profile">
                  <div class="text-center rounded border-none" style="border: none">
                  <img style="border: none" class="profile-user-img rounded border-none"
                        src="{{asset('img/logo/logo-telkom.png')}}"
                        alt="User profile picture">
                  </div>

                  <h3 class="profile-username text-center">{{$client->nama}}</h3>

                  <p class="text-muted text-center">{{$client->email}}</p>

                  

               </div>
               <!-- /.card-body -->
            </div>
            <!-- /.card -->

            <!-- About Me Box -->
            <div class="card card-info">
               <div class="card-header">
                  <h3 class="card-title">Detail</h3>
               </div>
               <!-- /.card-header -->
               <div class="card-body">
               
                  <strong><i class="fas fa-map-marker-alt mr-1"></i> Location</strong>

                  <p class="text-muted">{{$client->alamat}}</p>
                  <hr>
                  <strong><i class="fas fa-file-alt mr-1"></i> Order</strong>

                  <p class="text-muted">{{count($orders)}}</p>

               
               </div>
               <!-- /.card-body -->
            </div>
            <!-- /.card -->
            </div>
            <!-- /.col -->
            <div class="col-md-9">
               <div class="card card-light card-tabs">
                  <div class="card-header p-0 pt-1">
                    <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link active" id="home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="home" aria-selected="true">Person</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" id="order-tab" data-toggle="pill" href="#order" role="tab" aria-controls="order" aria-selected="false">Order</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" id="setting-tab" data-toggle="pill" href="#setting" role="tab" aria-controls="setting" aria-selected="false">Setting</a>
                      </li>
                    </ul>
                  </div>
                  <div class="card-body">
                    <div class="tab-content" id="custom-tabs-one-tabContent">

                      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <div class="post">
                           <div class="card bg-light">
                              <div class="card-header text-muted border-bottom-0">
                              Project Manager
                              </div>
                              <div class="card-body pt-0">
                              <div class="row">
                                 <div class="col-7">
                                    <h2 class="lead"><b>{{$client->nama_pm}}</b></h2>
                                    {{-- <p class="text-muted text-sm"><b>About: </b> Web Designer / UX / Graphic Artist / Coffee Lover </p> --}}
                                    <ul class="ml-4 mb-0 fa-ul text-muted">
                                    {{-- <li class="small"><span class="fa-li"><i class="fas fa-lg fa-building"></i></span> Address: Demo Street 123, Demo City 04312, NJ</li> --}}
                                    <li class="small"><span class="fa-li"><i class="fas fa-lg fa-phone"></i></span> Phone #: {{$client->no_pm}}</li>
                                    </ul>
                                 </div>
                                 {{-- <div class="col-5 text-center">
                                    <img src="{{asset('img/profil.png')}}" width="60px" alt="" class="img-circle img-fluid">
                                 </div> --}}
                              </div>
                              </div>
                              <div class="card-footer">
                              <div class="text-right">
                                 <a href="#" class="btn btn-sm bg-teal">
                                    <i class="fas fa-comments"></i>
                                 </a>
                                 <a href="#" class="btn btn-sm btn-primary">
                                    <i class="fas fa-user"></i> View Profile
                                 </a>
                              </div>
                              </div>
                           </div>
                        </div>
                        <div class="post">
                           <div class="card bg-light">
                              <div class="card-header text-muted border-bottom-0">
                              General Manager
                              </div>
                              <div class="card-body pt-0">
                              <div class="row">
                                 <div class="col-7">
                                    <h2 class="lead"><b>{{$client->nama_gm}}</b></h2>
                                    {{-- <p class="text-muted text-sm"><b>About: </b> Web Designer / UX / Graphic Artist / Coffee Lover </p> --}}
                                    <ul class="ml-4 mb-0 fa-ul text-muted">
                                    {{-- <li class="small"><span class="fa-li"><i class="fas fa-lg fa-building"></i></span> Address: Demo Street 123, Demo City 04312, NJ</li> --}}
                                    <li class="small"><span class="fa-li"><i class="fas fa-lg fa-phone"></i></span> Phone #: {{$client->no_gm}}</li>
                                    </ul>
                                 </div>
                              </div>
                              </div>
                              <div class="card-footer">
                              <div class="text-right">
                                 <a href="#" class="btn btn-sm bg-teal">
                                    <i class="fas fa-comments"></i>
                                 </a>
                                 <a href="#" class="btn btn-sm btn-primary">
                                    <i class="fas fa-user"></i> View Profile
                                 </a>
                              </div>
                              </div>
                           </div>
                        </div> 
                      </div>
                      <div class="tab-pane fade" id="order" role="tabpanel" aria-labelledby="order">
                        <table class="table">
                           <thead>
                              <tr>
                                 <th>No</th>
                                 <th>Site</th>
                                 <th>Status</th>
                              </tr>
                           </thead>
                           <tbody>
                              @foreach ($orders as $order)
                                 <tr>
                                    <td>{{++$i}}</td>
                                    <td>{{$order->site}}</td>
                                    <td>
                                       @if ($order->status == 3)
                                          <p class=" text-info">Menunggu Kordinator</p>
                                          @elseif($order->status == 4)
                                          <p class=" text-info">Menunggu Teknisi</p>
                                          @elseif($order->status == 5)
                                          <p class=" text-info">On Progress</p>
                                          @elseif($order->status == 6)
                                          <p class=" text-info">Report Photo</p>
                                          @elseif($order->status == 7)
                                          <p class=" text-info">Finish/p>
                                          @elseif($order->status == 9)
                                          <p class=" text-info">Done</p>
                                          @elseif($order->status == 202)
                                          <p class=" text-danger">Pending</p>
                                       @endif
                                    </td>
                                 </tr>
                              @endforeach
                           </tbody>
                        </table>
                      </div>
                     
                      <div class="tab-pane fade" id="setting" role="tabpanel" aria-labelledby="setting">
                        <form action="{{route('client.update', $client)}}" method="POST" class="form-horizontal">
                           @csrf
                           @method('PUT')
                           <div class="form-group row">
                              <label for="namaPerusahaan" class="col-sm-2 col-form-label">Name</label>
                              <div class="col-sm-10">
                                 <input type="text" class="form-control" id="namaPerusahaan" name="namaPerusahaan" value="{{$client->nama}}">
                              </div>
                           </div>
                           <div class="form-group row">
                              <label for="email" class="col-sm-2 col-form-label">Email</label>
                              <div class="col-sm-10">
                                 <input type="email" class="form-control" id="email" name="email" value="{{$client->email}}">
                              </div>
                           </div>
                           <div class="form-group row">
                              <label for="alamatPerusahaan" class="col-sm-2 col-form-label">Alamat</label>
                              <div class="col-sm-10">
                                 <textarea class="form-control" id="alamatPerusahaan" name="alamatPerusahaan" placeholder="Experience">{{$client->alamat}}</textarea>
                              </div>
                           </div>
                           <hr>
                           <div class="form-group row">
                              <label for="gm" class="col-sm-2 col-form-label">GM</label>
                              <div class="col-sm-10">
                                 <input type="text" class="form-control" id="gm" name="gm" value="{{$client->nama_gm}}">
                              </div>
                           </div>
                           <div class="form-group row">
                              <label for="nogm" class="col-sm-2 col-form-label">No. GM</label>
                              <div class="col-sm-10">
                                 <input type="text" class="form-control" id="nogm" name="nogm" value="{{$client->no_gm}}">
                              </div>
                           </div>
                           <div class="form-group row">
                              <label for="pm" class="col-sm-2 col-form-label">PM</label>
                              <div class="col-sm-10">
                                 <input type="text" class="form-control" id="pm" name="pm" value="{{$client->nama_gm}}">
                              </div>
                           </div>
                           <div class="form-group row">
                              <label for="nopm" class="col-sm-2 col-form-label">No. GM</label>
                              <div class="col-sm-10">
                                 <input type="text" class="form-control" id="nopm" name="nopm" value="{{$client->no_gm}}">
                              </div>
                           </div>
                           {{-- <div class="form-group row">
                              <label for="logo" class="col-sm-2 col-form-label">Logo</label>
                              <div class="col-sm-10">
                                 <div class="input-group">
                                    <div class="custom-file">
                                      <input type="file" class="custom-file-input" id="logo" name="logo">
                                      <label class="custom-file-label" for="logo">Choose file</label>
                                    </div>
                                  </div>
                              </div>
                           </div> --}}
                           
                           <div class="form-group row">
                           <div class="offset-sm-2 col-sm-10">
                              <button type="submit" class="btn btn-secondary">Update</button>
                           </div>
                           </div>
                        </form>
                      </div>
                    </div>
                  </div>
                  <!-- /.card -->
                </div>
               
            </div>
            <!-- /.col -->
         </div>
         <!-- /.row -->
      </div><!-- /.container-fluid -->
   </section>
@endsection

@push('datatables')
<script>
   $(function () {
     $("#example1").DataTable({
       "responsive": true,
       "autoWidth": false,
     });
     $('#example2').DataTable({
       "paging": true,
       "lengthChange": false,
       "searching": false,
       "ordering": true,
       "info": true,
       "autoWidth": false,
       "responsive": true,
     });
   });
 </script>
@endpush