@extends('layouts.admin.app', ["title" => "Transaksi Stok Opname"])

@push('css')
<style>
    .btn-outline-primary {
        height: 5rem;
        width: 12rem !important;
        padding: 0 !important;
        overflow: hidden;
        font-size: 1rem !important;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    @media (max-width: 575.98px) {
        .ml-1 {
            margin-left: 0 !important;
        }
    }
</style>
@endpush

@section('main')
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>Stok Opname</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
                <div class="breadcrumb-item"><a href="#">Transaksi</a></div>
                <div class="breadcrumb-item">Stok Opname</div>
            </div>
        </div>

        <div class="section-body">
            <div class="row">
                <div class="col-12 col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <form class="needs-validation" id="form_data" novalidate="">
                                @csrf
                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <h6>Kode Barang</h6>
                                        <div class="">
                                            <select class="form-control select2" id="select-barang" required>
                                                <option value=0 disabled selected>Pilih Barang</option>
                                                @foreach ($barangs as $barang)
                                                <option value="{{ $barang->id }}" data-nama="{{ $barang->nama }}"
                                                    data-harga-jual="{{ $barang->harga_jual }}"
                                                    data-grosir="{{ $barang->is_grosir }}">
                                                    {{-- data-satuan="{{ $barang->satuan->nama }}"> --}}
                                                    {{ $barang->kode }} - {{ $barang->nama }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <h6>Pilih Batch</h6>
                                        <div class="">
                                            <select class="form-control select2" id="" required>
                                                <option>Batch 1 | 20 Januari 2026</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <h6>Tanggal Expired</h6>
                                        <input type="date" id="" class="form-control" readonly value="30/01/2028">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <h6>Stok Aplikasi</h6>
                                        <div class="">
                                            <div class="input-group">
                                                <input type="text" id="qty" class="form-control rupiah" placeholder="30" readonly>
                                                <div class="input-group-append">
                                                    <div class="input-group-text input-group-text-qty ">
                                                        satuan
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <h6>Stok Fisik</h6>
                                        <div class="">
                                            <div class="input-group">
                                                <input type="text" id="qty" class="form-control rupiah" placeholder="Masukkan Kuantitas Real">
                                                <div class="input-group-append">
                                                    <div class="input-group-text input-group-text-qty ">
                                                        satuan
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <button href="#" type="button"
                                            class="btn btn-primary btn-block btn-icon tambah-barang">
                                            <i class="fas fa-cart-plus"> </i> Masukan Ke Keranjang
                                        </button>
                                    </div>
                                    <div class="col-md-6">
                                        <button href="#" type="button"
                                            class="btn btn-block btn-warning btn-icon reset-barang">
                                            <i class="fas fa-rotate-right"> </i> Reset
                                        </button>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="text-dark">Keranjang Stok Opname</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-borderless table-striped w-100" id="">
                                    <thead class="table-dark ">
                                        <tr>
                                            <th style="width: 10%;">Action</th>
                                            <th style="width: 10%;">Kode</th>
                                            <th style="width: 15%;">Nama</th>
                                            <th style="width: 15%;">Batch & Tgl. Belanja</th>
                                            <th style="width: 15%;">Tanggal Expired</th>
                                            <th style="width: 15%;">Stok Awal</th>
                                            <th style="width: 15%;">Stok Akhir</th>
                                            <th style="width: 15%;">Selisih</th>
                                        </tr>
                                    </thead>
                                    <tbody class="action" style="vertical-align: middle !important;">
                                        <tr>
                                            <td class="action"><a href="#" class="btn btn-icon btn-danger">
                                                    <i class="far fa-trash-can"></i>
                                                </a></td>
                                            <td>kkk/kkkk</td>
                                            <td>OBH</td>
                                            <td class="text-right">Batch 1 - 20 Januari 2024</td>
                                            <td class="text-right">20 Januari 2028</td>
                                            <td class="text-right">30 botol</td>
                                            <td class="text-right">20 botol</td>
                                            <td class="text-right"><div class="text-danger">-10 botol</div></td>
                                        </tr>
                                        <tr>
                                            <td class="action"><a href="#" class="btn btn-icon btn-danger">
                                                    <i class="far fa-trash-can"></i>
                                                </a></td>
                                            <td>123</td>
                                            <td>OBH Batuk</td>
                                            <td class="text-right">Batch 1 - 20 Januari 2024</td>
                                            <td class="text-right">20 Januari 2028</td>
                                            <td class="text-right">30 botol</td>
                                            <td class="text-right">40 botol</td>
                                            <td class="text-right"><div class="text-success">+10 botol</div></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="text-right">
                                    <button type="button" data-target="#modal-konfirmasi" data-toggle="modal"
                                        class="justify-content-end btn-block btn-lg btn btn-success btn-icon">
                                        <i class="fas fa-wallet"></i> Simpan Stok Opname
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<div class="modal fade" id="modal-konfirmasi" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"aria-hidden="true">
    <div class="modal-dialog" role="">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="exampleModalLabel">Konfirmasi Simpan Data</h5>
                <button type="button" class="rounded-circle btn btn-icon btn-danger text-white" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <label for=""><b> Harap memastikan seluruh data barang telah diinput secara lengkap dan total Stok Opname pada aplikasi sesuai dengan stok fisik pada gudang, karena transaksi yang telah tersimpan bersifat final dan tidak dapat diubah.</b></label>
                </div>
            </div>
            <div class="modal-footer">
                <div class="row w-100">
                    <div class="col-md-6 pl-0">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-times"> </i> Batal</button>
                    </div>
                    <div class="col-md-6 pr-0">
                        <button type="button" class="btn btn-success "><i class="fas fa-check"> </i> Simpan Transaksi</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
@endpush