@extends('layouts.adminlte')
@section('title','Peminjaman Hardware')

@section('content')
<div class="mb-2 d-flex align-items-center">
    <button class="btn btn-primary mr-2" id="btnTambah">Tambah</button>
    <input type="month" class="form-control form-control-sm mr-2" id="exportPeriode" style="width: 170px;" value="{{ date('Y-m') }}">
    <button class="btn btn-success btn-sm" id="btnExportPinjam">Export XLSX</button>
</div>

<table class="table table-bordered" id="tablePinjam">
<thead>
<tr>
<th>Hardware</th>
<th>User</th>
<th>Tanggal Pinjam</th>
<th>Tanggal Kembali</th>
<th>Aksi</th>
</tr>
</thead>
</table>

<div class="modal fade" id="modalForm">
<div class="modal-dialog">
<form id="formData" method="POST" action="{{ route('peminjaman.store') }}">@csrf
<input type="hidden" name="id_peminjaman" id="id_peminjaman">

<div class="modal-content">
<div class="modal-header"><h5>Peminjaman</h5></div>

<div class="modal-body">

<select name="id_hardware" class="form-control mb-2">
@foreach($hardware as $h)
<option value="{{$h->id_hardware}}">
{{ $h->kode_inventaris_local }} - {{ $h->nama_barang }}
</option>
@endforeach
</select>

<select name="id_user" class="form-control mb-2">
@foreach($users as $u)
<option value="{{$u->id_user}}">
{{$u->jabatan}}
</option>
@endforeach
</select>

<select name="id_lokasi" class="form-control mb-2" required>
@foreach($lokasis as $l)
<option value="{{$l->id}}">
{{$l->kd_lokasi}} - {{$l->nama_lokasi}}
</option>
@endforeach
</select>

<input type="date" name="tanggal_pinjam" class="form-control mb-2">
<input type="date" name="tanggal_kembali" class="form-control mb-2">
<textarea name="keterangan" class="form-control"></textarea>

</div>

<div class="modal-footer">
<button class="btn btn-success" type="submit">Simpan</button>
</div>
</div>
</form>
</div>
</div>
@endsection

@push('scripts')
<script>
$(function(){

let table = $('#tablePinjam').DataTable({
    ajax: "{{ route('peminjaman.data') }}",
    columns: [
        {data:'hardware.nama_barang'},
        {data:'user.jabatan'},
        {data:'tanggal_pinjam'},
        {data:'tanggal_kembali'},
        {
            data:'id_peminjaman',
            render: d => `
            <button class="btn btn-warning edit" data-id="${d}">Edit</button>
            <button class="btn btn-danger delete" data-id="${d}">Hapus</button>`
        }
    ]
});

$('#btnTambah').click(()=>{
    $('#formData')[0].reset();
    $('#id_peminjaman').val('');
    $('#modalForm').modal('show');
});

$('#btnExportPinjam').click(function () {
    let periode = $('#exportPeriode').val();
    if (!periode) {
        alert('Periode wajib diisi.');
        return;
    }
    window.location.href = "{{ route('peminjaman.export') }}" + '?periode=' + encodeURIComponent(periode);
});

$('#formData').submit(function(e){
    e.preventDefault();
    $.post("{{ route('peminjaman.store') }}", $(this).serialize(), ()=>{
        $('#modalForm').modal('hide');
        table.ajax.reload();
    });
});

$(document).on('click','.edit',function(){
    $.get('/transaksi/peminjaman-hardware/edit/'+$(this).data('id'),res=>{
        Object.keys(res).forEach(k=>{
            $('[name='+k+']').val(res[k]);
        });
        $('#modalForm').modal('show');
    });
});

$(document).on('click','.delete',function(){
    if(confirm('Hapus?')){
        $.ajax({
            url:'/transaksi/peminjaman-hardware/delete/'+$(this).data('id'),
            type:'DELETE',
            data:{_token:'{{ csrf_token() }}'},
            success:()=>table.ajax.reload()
        });
    }
});

});
</script>
@endpush