@extends('layouts.app')

@section('content')
    @include('layouts.headers.header-content')
    
    <div class="container-fluid mt--6">
      <div class="row">
        <div class="col">
          <div class="card">
            <!-- Card header -->
            <div class="card-header border-0">
              <h3 class="mb-0">{{ $current_page }}</h3>
              <div class="d-flex flex-row-reverse">
              <a class="btn btn-md btn-primary justify-content-end text-white modal_add" ><i class="fas fa-plus"></i> Tambah</a>
                </div>
            </div>
         
            @if ($message = Session::get('sukses'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
    <span class="alert-inner--text"><strong>{{ $message }}</strong> </span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
    @endif
        
    @if ($message = Session::get('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
    <span class="alert-inner--text"><strong>{{ $message }}</strong> </span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
    @endif
            
        
            <!-- Light table -->
            <div id="show_image_popup">
  <div class="close-btn-area">

    <button id="close-btn-image"><i class="fas fa-plus"></i></button> 
  </div>
  <div id="image-show-area">
    <img id="large-image" src="" alt="">
  </div>
</div>
            <div class="table-responsive">
              <table class="table align-items-center table-flush" id="table_data">
                <thead class="thead-light">
                  <tr>
                    <th scope="col" class="sort" data-sort="name">Nama Barang </th>
                    <th scope="col" class="sort" data-sort="budget">Jenis Barang</th>
                    <th scope="col" class="sort" data-sort="status">Lokasi</th>
                    <th scope="col" class="sort" data-sort="completion">Jumlah Barang</th>
                    <th scope="col"> Tanggal Masuk </th>
                    <th scope="col"> Action</th>
                  </tr>
                </thead>
                <tbody class="list">

 
                  @foreach($barang as $i)
                        <tr>
                            <td> <div class="media align-items-center">
                        <a href="#" class="circlee small-image mr-3">
                          <img alt="Image placeholder" src="{{ \Helperku::get_image_barang($i->id) }}">
                        </a>
                        <div class="media-body">
                          <span class="name mb-0 text-sm">{{ $i->nama_barang }}</span>
                        </div>
                      </div><br>
                            <span class="badge badge-primary">{{ $i->serial_number }}</span></td>
                            <td>{{ $i->nama_jenis }}</td>
                            <td> <a href="https://maps.google.com/?q=<?= $i->lokasi ?>" target="_blank" class="btn btn-sm btn-outline-primary">
                                 <?= $i->lokasi ?>  <span class="badge badge-light"><i class="fas fa-map-marker text-success"></i></span>
                            </a></td>
                            <td><a data-id="{{ $i->id }}" class="modal_detail_stok btn btn-sm btn-outline-light" > {{ $i->jumlah_barang }} / {{ $i->nama_satuan }} <i class="fas fa-info-circle text-success"></i></a></td>
                            <td><span class="fas fa-calendar-check"></span> {{ $i->tanggal_masuk }}</td>
                            <td class="text-right">
                   
                   <a data-id="{{ $i->id }}" href="#" data-toggle="tooltip" data-placement="top" title="Edit"   class=" modal_edit text-right btn btn-md btn-outline-success"><i class="fas fa-edit  text-right"></i> </a>
                   <a data-toggle="tooltip" data-placement="top" title="Hapus" onclick="return confirm('barang ini akan di delete ... ?')" href="{{ route('barang.hapus',$i->id) }}" class=" text-right btn btn-md btn-outline-danger"><i class="fas fa-trash"></i> </a>
                   <a data-id="{{ $i->id }}" href="#" data-toggle="tooltip" data-placement="top" title="Barang Keluar"   class=" modal_keluar text-right btn btn-md btn-outline-primary"><i class="fas fa-arrow-right  text-right"></i> </a> 
             </td>
                            
                        </tr>

                  @endforeach
                </tbody>
              </table>
            </div>
            <!-- Card footer -->
           
          </div>
        </div>
      </div>
</div>
<!-- Modal -->
@include('admin.barang.modal_add')
@include('admin.barang.modal_edit')
@include('admin.barang.modal_keluar')
@include('admin.barang.modal_detail_stok')

        @include('layouts.footers.auth')
    </div>
@endsection

@push('js')
    <script src="{{ secure_asset('argon') }}/vendor/chart.js/dist/Chart.min.js"></script>
    <script src="{{ secure_asset('argon') }}/vendor/chart.js/dist/Chart.extension.js"></script>
    
<script>
    $("[name=jenis_keluar]").change(function(e){

            e.preventDefault();

            var isi = $(this).val();

            if(isi == 1){

                var html = '';
              
                html += '<div class="row bm-3">'+
                        '<div class="form-group mb-3 col-6">'+
                        '<div class="input-group input-group-alternative">'+
                         '<div class="input-group-prepend">'+
                        '<span class="input-group-text"> <i class="fas fa-user"></i></span>'+
                        '</div>'+
                        '<select name="pengguna" class="form-control" required>'+
                        '<option value="">-- Pilih Penanggung Jawab --</option>'+
                        '@foreach($pengguna as $i)'+
                        '<option value="{{ $i->id }}">{{ $i->nama }}</option>'+
                        '@endforeach'+
                        '</select>'+
                        '</div>'+
                        '</div>'+
                        '<div class="form-group mb-3 col-6">'+
                        '<div class="input-group input-group-alternative">'+
                        '<div class="input-group-prepend">'+
                        '<span class="input-group-text"><i class="fas fa-upload"></i></span>'+
                        '</div>'+
                        '<input class="custom-file-input form-control" required placeholder="inputkan Jumlah Barang ..." type="file" name="file_barang"><br>'+
                        '<small>* Upload FIle</small>'+
                        '</div>'+
                        '</div>'+
                        '</div>';
                $("#pinjam_field").html(html);
            }else{
              $("#pinjam_field").html('');
            }

    })
</script>
    <script>

$(document).ready(function () {
    $('#table_data').DataTable();
    $('[data-toggle="tooltip"]').tooltip();
});
        $(".modal_add").click(function(e){

            e.preventDefault();

            $("#modal_add").modal('show');
        })

        $(".modal_keluar").click(function(e){

e.preventDefault();
$("#modal_keluar").modal('show');
var id = $(this).attr('data-id');

$.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  }
              })
            $.ajax({
                url:"{{ secure_url('get_barang') }}",
                method:"post",
                data:{id:id},
                success:function(data){

                    var obj = JSON.parse(data);
                    console.log(obj[0].serial_number);

                    $("[name=nama_barang]").val(obj[0].nama_barang);
                    $("[name=id_barang]").val(id);
                    $(".serial_number").text('S/N  :  '+obj[0].serial_number);
                    $(".jenis_barang").text('Jenis :'+obj[0].nama_jenis );
                

                    
              $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  }
              })

            $.ajax({
                url:"{{ secure_url('get_detail_stok') }}",
                method:"post",
                data:{id:id},
                success:function(data){

                    var obj = JSON.parse(data);
                    console.log(obj);

                  
                    $(".satuan_barang").text('Stok :'+obj.stok_now+'');


                }


            })

                }


            })

  })
$(".modal_detail_stok").click(function(e){
  e.preventDefault();
  var id_barang = $(this).attr('data-id');
  $("#modal_detail_stok").modal('show');

  $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  }
              })
            $.ajax({
                url:"{{ secure_url('get_detail_stok') }}",
                method:"post",
                data:{id:id_barang}, 
                success:function(data){

                    var obj = JSON.parse(data);
                    // console.log(obj);
                    var stok_pinjam = '';
                    var stok_rusak = '';
                    var stok_awal = '';
                    var stok_now = '';

                    $(".stok_awal").text(obj.stok_awal);
                    $(".stok_now").text(obj.stok_now);
                    $(".nama_barang").text(obj.nama_barang); 
                    if(obj.stok_pinjam == 0){

                     stok_pinjam = 0;
                    }else{
                      stok_pinjam = obj.stok_pinjam;
                    }
                                     
                    if(obj.stok_rusak == 0){

                    stok_rusak = 0;
                    }else{
                    stok_rusak = obj.stok_rusak;
                    }

                    $(".stok_pinjam").text(stok_pinjam);
                    $(".stok_rusak").text(stok_rusak)


                }


            })


})
        $(".modal_edit").click(function(e){

e.preventDefault();

$("#modal_edit").modal('show');
var id = $(this).attr('data-id');
// console.log(id_jenis);  
            $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  }
              })
            $.ajax({
                url:"{{ secure_url('get_barang') }}",
                method:"post",
                data:{id:id},
                success:function(data){

                    var obj = JSON.parse(data);
                    console.log(obj[0].nama_barang);

                    $("[name=nama_barang]").val(obj[0].nama_barang);
                    $("[name=id]").val(id);
                    $("[name=serial_number]").val('S/N  :  '+obj[0].serial_number);
                    $("[name=lokasi]").val(obj[0].lokasi);
                    $("[name=keterangan]").val(obj[0].keterangan);
                    $("[name=jumlah]").val(obj[0].jumlah_barang);
                    $("[name=tanggal_masuk]").val(obj[0].tanggal_masuk);
             

                }


            })

})
$( document ).ready(function(){






// without animation
/*
$("#close-btn").click(function(){
   $(".small-image").removeClass('active');
  $("#show_image_popup").hide();
})


$(".small-image").click(function(){
   // add active class
   $(this).addClass('active');
  var image_path = $(this).attr('src'); 
  $("#show_image_popup").hide();
  // now st this path to our popup image src
  $("#show_image_popup").show();
  $("#large-image").attr('src',image_path);

})
*/

// with animation  

  $("#close-btn-image").click(function(){
     // remove active class from all images
    $(".small-image").removeClass('active');
    $("#show_image_popup").slideUp();
  })

  $(".small-image img").click(function(){
      // remove active class from all images
     $(".small-image").removeClass('active');
    // add active class
     $(this).addClass('active');

    var image_path = $(this).attr('src'); 

    console.log(image_path);
    $("#show_image_popup").fadeOut();
    // now st this path to our popup image src
    $("#show_image_popup").fadeIn();
    $("#large-image").attr('src',image_path);

  })

})


// javascript

// var small_images  = document.getElementsByClassName("small-image");
// var show_image_popup  = document.getElementById("show_image_popup");
// var large_image  = document.getElementById("large-image");
// var close_btn = document.getElementById("close-btn");

// for(var i=0; i< small_images.length; i++){

//   small_images[i].addEventListener("click", function(){
//     // remove active class from every images
//     for(var j=0; j< small_images.length; j++){
//       small_images[j].classList.remove('active');
//     }
//     // end

//     this.classList.add('active'); // add active class to this image
  
//     var src_val = this.src;
//     large_image.src = src_val;
//     showModal();
//   });
// }


// function showModal(){
//   show_image_popup.style.display = 'block';
// }

// close_btn.addEventListener("click", function(){
//   // before colose the modal we need to remove active class
//   for(var i=0; i< small_images.length; i++){
//     small_images[i].classList.remove('active');
//   }
//   // end
//   closeModal();
// });

// function closeModal(){
//   show_image_popup.style.display = 'none';
// }


        </script>
@endpush