@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 header-sub">{{ $sub_1 }}<br>
                    </h3>
              <div class="d-flex flex-row-reverse ">

                    <select name="filter_jenis" required class="col-2 form-control form-control-sm">
                            <option value="">-- Filter Status Barang --</option>
                            <option value="1" selected>Di pinjam </option>
                            <option value="2">Rusak</option>
                    </select>
                </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 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 Pengguna </th>
                    <th scope="col" class="sort" data-sort="budget">Barang</th>
                    <th scope="col" class="sort" data-sort="status">Lokasi Keluar</th>
                    <th scope="col" class="sort" data-sort="completion">Jumlah Keluar</th>
                    <th scope="col"> Tanggal Keluar</th>
                    <th scope="col"> Action</th>
                  </tr>
                </thead>
                <tbody class="list isi_data">


                  @foreach($barang_keluar as $i)
                        <tr>
                            <td>{{ $i->nama}} <br>
                                <span class="badge badge-danger">{{ $i->transaksi_id }}</span> </td>
                            <td>{{ $i->nama_barang }} <br>
                                <span class="badge badge-primary">S/N : {{ $i->serial_number }}</span> <span class="badge badge-success">{{ $i->nama_jenis }}</span> </td>
                            <td> <a href="https://maps.google.com/?q=<?= $i->lokasi_keluar ?>" target="_blank" class="btn btn-sm btn-outline-primary">
                                 <?= $i->lokasi_keluar ?>  <span class="badge badge-light"><i class="fas fa-map-marker text-success"></i></span>
                            </a></td>
                            <td>{{ $i->jumlah_keluar }} / {{ $i->nama_satuan }}</td>
                            <td><span class="fas fa-calendar-check"></span> {{ $i->tanggal_keluar }}</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('layouts.footers.auth')
    </div>
@endsection

@push('js')
    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.extension.js"></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:"{{ 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);
                    $(".satuan_barang").text('Stok :'+obj[0].jumlah_barang+'/'+obj[0].nama_satuan);


                }


            })

})

$("[name=filter_jenis]").change(function(e){

  e.preventDefault();

  var isi = $(this).val();
  console.log(isi);
;  if(isi == 1){

      location.href="{{ route('transaksi.index') }}";

  }else if(isi == 2)
  { 

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

                   $("#table_data").html(data);

                   $(".header-sub").text('Data Barang 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:"{{ url('get_divisi') }}",
                method:"post",
                data:{id:id},
                success:function(data){

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

                    $("[name=nama_divisi]").val(obj.nama_divisi);
                    $("[name=id]").val(obj.id);


                }


            })

})
        
        </script>
@endpush