@extends('layouts.mainlayout')

@section('title','Barang Keluar')


@section('tombol+')
<div class="ms-md-auto py-2 py-md-0">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-round" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Entri Data
    </button>
</div>
@endsection

@section('header+')
<ul class="breadcrumbs mb-3">
    <li class="nav-home">
        <a href="#">
            <i class="icon-home"></i>
        </a>
    </li>
    <li class="separator">
        <i class="icon-arrow-right"></i>
    </li>
    <li class="nav-item">
        <a href="#">Transaksi</a>
    </li>
    <li class="separator">
        <i class="icon-arrow-right"></i>
    </li>
    <li class="nav-item">
        <a href="#">Barang Keluar</a>
    </li>
</ul>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Barang Keluar</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="basic-datatables"
                        class="display table table-bordered table-sm table-striped table-hover nowrap-table">
                        <thead class="table-success">
                            <tr>
                                <th>NO</th>
                                <th>ID TRANSAKSI</th>
                                <th>TANGGAL</th>
                                <th>WAREHOUSE</TH>
                                <th>SKU</th>
                                <th>JUMLAH KELUAR</th>
                                <th>AKSI</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($BarangKeluar as $Barang)
                            <tr>
                                <td>{{$loop->iteration }}</td>
                                <td>{{$Barang->id_Transaksi}}</td>
                                <td>{{$Barang->TANGGAL}}</td>
                                <td>{{$Barang->warehouse->WAREHOUSE}}</td>
                                <td>{{$Barang->SKU}}</td>
                                <td>{{$Barang->JUMLAH}}</td>
                                <td class="text-center">
                                    <button href="#" class="btn btn-xs btn-warning editBtn"
                                        data-id="{{ $Barang->id_Transaksi }}"
                                        data-mounting="{{ $Barang->id_Transaksi }}">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button href="#" class="btn btn-xs btn-danger deleteBtn"
                                        data-id="{{ $Barang->id_Transaksi }}">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Input -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="FormInput">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Form Input Barang Keluar</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="id_transaksi" class="form-label">ID Transaksi</label>
                        <input type="text" class="form-control" id="id_transaksi" name="id_transaksi"
                            value="{{ $KodeTransaksi }}" readonly required>
                    </div>

                    <div class="mb-3">
                        <label for="tanggal" class="form-label">Tanggal</label>
                        <input type="date" class="form-control" id="tanggal" name="tanggal" required
                            value="{{ date('Y-m-d') }}">
                    </div>

                    <div class="mb-3">
                        <label for="warehouse" class="form-label">Warehouse</label>
                        <select class="form-select" id="warehouse" name="warehouse" required>
                            <option selected disabled value=""> -- Select -- </option>
                            @foreach ($Warehouse as $tabel_warehouse)
                            <option value="{{ $tabel_warehouse->id_warehouse }}">{{ $tabel_warehouse->WAREHOUSE }}
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="barang_keluar" class="form-label">Nama Barang</label>
                        <select class="form-select" id="barang_keluar" name="barang_keluar" required>
                            <option selected disabled value=""> -- Select -- </option>
                            @foreach ($table_barang as $table_barang)
                            <option value="{{ $table_barang->SKU }}" data-stock="{{$table_barang->TOTAL_STOCK}}">
                                {{ $table_barang->SKU }} - {{ $table_barang->VALUE }}
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="jumlah" class="form-label">Jumlah</label>
                        <input type="number" class="form-control" id="jumlah" name="jumlah" required>
                    </div>

                    <div class="mb-3">
                        <label for="stock" class="form-label">Stock</label>
                        <input type="number" class="form-control" id="stock" name="stock"
                            value="{{$table_barang->TOTAL_STOCK}}" readonly required>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Simpan</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection


@section('Script')
<script>
    $(document).ready(function() {
        $('#barang_keluar').select2({
            theme: "bootstrap",
            dropdownParent: $('#exampleModal .modal-content')
        });
        $('#barang_keluar').on('change', function () {
            let stock = $(this).find(':selected').data('stock');
            $('#stock').val(stock);
        });
    });
</script>

<script>
    $(document).ready(function() {
        $('#FormInput').on('submit', function(e) {
            e.preventDefault(); // cegah reload

            $.ajax({
                url: "{{ route('BarangKeluar.add') }}",
                method: "POST",
                data: $(this).serialize(),
                success: function(response) {
                    if(response.success){
                        alert(response.message);
                        $('#exampleModal').modal('hide');
                        $('#FormInput')[0].reset();
                        location.reload(); // reload page biar data tampil (atau update table via JS)
                    }
                    else{
                        alert('Terjadi kesalahan: ' + response.message);
                    }
                },
            error: function(xhr) {alert('Terjadi kesalahan !');}
            });
        });
    });
</script>
@endsection