@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => 'Adjustemnt', 'pages' => 'Transaksi', 'sumber' => 'Edit Penerimaan Barang'])
@if($page == 'edit')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="card shadow-lg mx-4">
    <div class="card-body p-3">
        <div class="row gx-4">
            <div class="col-lg">
                <div class="nav-wrapper">
                    <form id="barangForm" enctype="multipart/form-data" method="POST" action="{{ route('pengeluaran.update', ['kode' => $tr_pengeluaran_h->kode]) }}">
                        @csrf
                        @method('PUT')
                        <a href="{{ url('Trpeng') }}" class="btn btn-secondary mb-0"><i class="fas fa-chevron-left me-1"></i>Kembali</a>
                        <button type="submit" class="btn btn-primary mb-0" onclick="saveData(event)"><i class="fas fa-download me-1"></i>Simpan</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-12">
            <div class="row mx-1">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Edit {{ $title_menu }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <form id="my-form">
                                @csrf
                                <div class="mb-3">
                                    <label for="" class="form-label">Kode Transaksi</label>
                                    <input type="text" class="form-control" id="kode" name="kode" value="{{ $tr_pengeluaran_h->kode }}" readonly>
                                </div>
                                <div class="mb-3">
                                    <label for="tgl" class="form-label">Tanggal</label>
                                    <input type="date" class="form-control" id="tgl" name="tgl" value="{{ $tr_pengeluaran_h->tgl }}" readonly>
                                </div>
                                <div class="mb-3">
                                    <label for="dpt" class="form-label" hidden>Departemen</label>
                                    <input type="text" class="form-control" id="dpt" name="dpt" value="{{ $user_login->lastname}}" readonly hidden>
                                </div>
                                <div class="mb-3">
                                    <label for="keterangan" class="form-label">Keterangan</label>
                                    <input type="text" class="form-control" id="keterangan" name="keterangan" value="{{ $tr_pengeluaran_h->keterangan }}" readonly>
                                </div>
                                <button type="button" class="btn btn-primary" onclick="openModal()"><i class="fas fa-plus me-1"></i>
                                    Tambah Barang
                                </button>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table id="table-barang" class="table table-bordered table-striped">
                                            <thead>
                                                <tr>
                                                    <th style="text-align: center">Jenis Barang</th>
                                                    <th style="text-align: center">Nama Barang</th>
                                                    <th style="text-align: center">deskripsi Barang</th>
                                                    <th style="text-align: center">Kode Barang</th>
                                                    <th style="text-align: center">Qty</th>
                                                    <th style="text-align: center">Satuan</th>
                                                    <th style="text-align: center">Gambar</th>
                                                    <th style="text-align: center">Catatan</th>
                                                    <th style="text-align: center">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($tr_pengeluaran_d as $index => $detail)
                                                @if($detail->tr_pengeluaran_h == $tr_pengeluaran_h->kode)
                                                <tr data-kode='{"kode": {{ $index + 1 }}}' data-jenis_barang="{{ $detail->jenis_barang }}" data-nama_barang="{{ $detail->nama_barang }}" data-deskripsi_barang="{{ $detail->deskripsi_barang }}" data-idatk="{{ $detail->idatk }}" data-qty="{{ $detail->qty }}" data-satuan="{{ $detail->satuan }}" data-gambar="{{ $detail->gambar }}" data-ktr="{{ $detail->ktr }}">
                                                    <td>{{ $detail->jenis_barang }}</td>
                                                    <td>{{ $detail->nama_barang }}</td>
                                                    <td>{{ $detail->deskripsi_barang }}</td>
                                                    <td>{{ $detail->idatk }}</td>
                                                    <td style="text-align: right">{{ $detail->qty }}</td>
                                                    <td>{{ $detail->satuan }}</td>
                                                    <td style="text-align: center">
                                                        <span class="d-flex justify-content-center align-items-center">
                                                            <img src="{{ asset('storage/' . $detail->gambar) }}" alt="image" style="max-width: 100px; max-height: 50px;" onclick="showZoomImage('{{ asset('storage/' . $detail->gambar) }}')">
                                                        </span>
                                                    </td>
                                                    <td>{{ $detail->ktr }}</td>
                                                    <td>
                                                        <button type="button" class="btn btn-danger btn-sm" onclick="hapusBaris(this)"><i class="fas fa-trash me-1"></i>Hapus</button>
                                                        <button type="button" class="btn btn-success btn-sm" onclick="editBaris(this)"><i class="fas fa-pen me-1"></i>Edit</button>
                                                    </td>
                                                </tr>
                                                @endif
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="staticBackdropLabel">Tambah Pengeluaran Barang</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <table class="table table-hover datatable" id="dataDisplay">
                                    <tbody style="background-color: #daecff;">
                                        <div class="mb-3">
                                            <label for="jenis_barang" class="form-label">Jenis Barang</label>
                                            <select name="jenis_barang" id="jenis_barang" class="form-control" required>
                                                <option value="" selected disabled>Pilih Jenis Barang</option>
                                                @foreach($mst_jenis as $js)
                                                <option value="{{ $js->nama }}">{{ $js->nama}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label for="nama_barang">Pilih Barang</label>
                                            <select name="nama_barang" id="nama_barang" class="form-control" required>
                                                <option value="" selected disabled>Pilih Nama Barang</option>
                                                @foreach($mst_barangatk as $stok)
                                                @if($stok->isactive == '1')
                                                <option value="{{ $stok->nama_barang }}" data-jenis="{{ $stok->jenis_barang }}">{{ $stok->nama_barang }}</option>
                                                @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label for="deskripsi_barang" class="form-label">Deskripsi</label>
                                            <input type="text" class="form-control" id="deskripsi_barang" name="deskripsi_barang" required readonly>
                                        </div>
                                        <div class="mb-3">
                                            <label for="idatk" class="form-label">Kode Barang</label>
                                            <input type="text" class="form-control" id="idatk" name="idatk" readonly required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="qty" class="form-label">Qty</label>
                                            <input type="number" class="form-control" id="qty" name="qty" step="1" pattern="\d+" required>
                                        </div>
                                        <!-- <div class="mb-3">
                                            <label for="qty" class="form-label">Qty</label>
                                            <input type="number" class="form-control" id="qty" name="qty" required>
                                        </div> -->
                                        <div class="mb-3">
                                            <label for="satuan" class="form-label">Satuan</label>
                                            <input type="text" class="form-control" id="satuan" name="satuan" readonly required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="gambar" class="form-label">Gambar</label>
                                            <input type="file" class="form-control" id="gambar" name="gambar" onchange="previewImage(this);" required>
                                            <img id="preview" style="display: none; max-width: 200px; max-height: 200px; margin-top: 10px;" />
                                        </div>
                                        <div class="mb-3">
                                            <label for="ktr" class="form-label">Catatan</label>
                                            <input type="text" class="form-control" id="ktr" name="ktr" required>
                                        </div>
                                    </tbody>
                                </table>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kembali</button>
                                <button type="button" class="btn btn-dark" onclick="resetModal()">Reset</button>
                                <button type="button" class="btn btn-primary" onclick="tambahBarang()">Simpan</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="staticBackdrop1" tabindex="-1" aria-labelledby="staticBackdropLabel1" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="staticBackdropLabel1">Edit pengeluaran Barang</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <table class="table table-hover datatable" id="dataDisplay">
                                    <tbody style="background-color: #daecff;">
                                        <div class="mb-3">
                                            <label for="jenis_barang" class="form-label">Jenis Barang</label>
                                            <select name="jenis_barang" id="jenis_barang_modal" class="form-control" required>
                                                <option value="" selected disabled>Pilih Jenis Barang</option>
                                                @foreach($mst_jenis as $js)
                                                <option value="{{ $js->nama }}" {{ isset($selected_jenis_barang) && $js->kode == $selected_jenis_barang ? 'selected' : '' }}>{{ $js->nama }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label for="nama_barang">Pilih Barang</label>
                                            <select name="nama_barang" id="nama_barang_modal" class="form-control" required>
                                                <option value="" disabled>Pilih Nama Barang</option>
                                                @foreach($mst_barangatk as $stok)
                                                @if($stok->isactive == '1')
                                                <option value="{{ $stok->nama_barang }}" {{ isset($selected_nama_barang) && $stok->idatk == $selected_nama_barang ? 'selected' : '' }}>{{ $stok->nama_barang }}</option>
                                                @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label for="deskripsi_barang" class="form-label">Deskripsi Barang</label>
                                            <input type="text" class="form-control" id="deskripsi_barang_modal" name="deskripsi_barang" readonly required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="idatk" class="form-label">Kode Barang</label>
                                            <input type="text" class="form-control" id="idatk_modal" name="idatk" readonly required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="qty" class="form-label">Qty</label>
                                            <input type="number" class="form-control" id="qty_modal" name="qty" step="1" pattern="\d+" required>
                                        </div>
                                        <!-- <div class="mb-3">
                                            <label for="qty" class="form-label">Qty</label>
                                            <input type="number" class="form-control" id="qty_modal" name="qty" required>
                                        </div> -->
                                        <div class="mb-3">
                                            <label for="satuan" class="form-label">Satuan</label>
                                            <input type="text" class="form-control" id="satuan_modal" name="satuan" readonly required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="gambar" class="form-label">Gambar</label>
                                            <input type="file" class="form-control" id="gambar_modal" name="gambar" onchange="showPreviewImage(event);">
                                            <img id="previewImage" src="" alt="Image Preview" style="max-width: 100px; max-height: 50px; display: none; margin-top: 10px;">
                                        </div>
                                        <div class="mb-3">
                                            <label for="ktr" class="form-label">Catatan</label>
                                            <input type="text" class="form-control" id="ktr_modal" name="ktr" required>
                                        </div>
                                    </tbody>
                                </table>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kembali</button>
                                <button type="button" class="btn btn-dark" onclick="resetModal()">Reset</button>
                                <button type="button" class="btn btn-primary" onclick="BaruIni()">Simpan</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- check flag js on dmenu --}}
@if ($jsmenu == '1')
@if (view()->exists("js.{$dmenu}"))
@push('addjs')
{{-- file js in folder (resources/views/js) --}}
@include('js.' . $dmenu);
@endpush
@else
@push('addjs')
<script>
    Swal.fire({
        title: 'JS Not Found!!',
        text: 'Please Create File JS',
        icon: 'error',
        confirmButtonColor: '#028284'
    });
</script>
@endpush
@endif
@endif
@endsection
@push('js')
@endpush
@endif