@extends('admin.layouts.app')

@section('title', 'Produk')

@push('style')
    <!-- CSS Libraries -->
    <link rel="stylesheet" href="{{ asset('admin/library/izitoast/dist/css/iziToast.min.css') }}">
@endpush

@section('main')
    {{-- Delete Modal --}}
    <div class="modal fade" id="deletebutton" data-backdrop="static" data-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Peringatan</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Apakah kamu yakin menghapus data ini?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                    <form action="" method="POST" class="d-inline" id="formHapus">
                        @csrf
                        @method('delete')
                        <button type="submit" class="btn btn-danger" id="deletebtn">Hapus data</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- Akhir modal --}}

    <div class="main-content">
        <section class="section">
            <div class="section-header">
                <h1>Tabel Barang Masuk</h1>
                <div class="section-header-breadcrumb">
                    <a href="{{ url('/barangmasuk/create') }}" class="btn btn-primary">Tambah</a>
                </div>
            </div>

            <div class="section-body">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex flex-row-reverse">
                                {{-- <h4>Table Test</h4> --}}
                                <div class="">
                                    <form>
                                        <div class="input-group">
                                            <input id="searchInput" type="text" class="form-control" placeholder="Search"
                                                autofocus>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table-striped table-md table" id="listingTable">
                                        <tr>
                                            <th>#</th>
                                            <th>Tanggal Masuk</th>
                                            <th>Kode Barang</th>
                                            <th>Supplier</th>
                                            <th>Nama Kopi</th>
                                            <th>Jumlah(Kg)</th>
                                            <th>Total Harga</th>
                                            <th>Action</th>
                                        </tr>
                                        @if ($data->count() == 0)
                                            <tr>
                                                <td class="text-center" colspan="8">Data tidak ada</td>
                                            </tr>
                                        @else
                                            @foreach ($data as $item)
                                                <tr>
                                                    <td>{{ $loop->iteration }}</td>
                                                    <td>{{ $item->tanggal_masuk }}</td>
                                                    <td>{{ $item->kode_barang }}</td>
                                                    <td>{{ $item->nama_supplier }}</td>
                                                    <td>{{ $item->nama_kopi }}</td>
                                                    <td>{{ $item->jumlah }}</td>
                                                    <td>  @currency($item->total_harga) </td>
                                                    <td>
                                                        <a href="/cetakstruk/{{ $item->id }}"
                                                            class="btn btn-info">Cetak</a>
                                                        <button type="button" class="btn btn-danger hapus"
                                                            data-toggle="modal" data-target="#deletebutton"
                                                            data-id="{{ $item->id }}">
                                                            Hapus
                                                        </button>
                                                        <a href="/barangmasuk/{{ $item->id }}"
                                                            class="btn btn-success">Detail</a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endif
                                    </table>
                                </div>
                            </div>
                            <div class="card-footer text-right">
                                <nav class="d-inline-block">
                                    <ul class="pagination mb-0">
                                        <li class="page-item active">
                                            <a class="page-link" onclick="prevPage()" href="#" tabindex="-1"><i
                                                    class="fas fa-chevron-left"></i></a>
                                        </li>
                                        <li class="page-item">
                                            <span id="page" class="page-link"></span>
                                        </li>
                                        <li class="page-item active">
                                            <a class="page-link" onclick="nextPage()" href="#"><i
                                                    class="fas fa-chevron-right"></i></a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@push('scripts')
    {{-- Page --}}
    <script src="{{ asset('admin/js/pagetable.js') }}"></script>
    <!-- JS Libraies -->
    <script src="{{ asset('admin/library/jquery-ui-dist/jquery-ui.min.js') }}"></script>

    <!-- Page Specific JS File -->
    <script src="{{ asset('admin/js/page/components-table.js') }}"></script>

    <!-- JS Libraies -->
    <script src="{{ asset('admin/library/izitoast/dist/js/iziToast.min.js') }}"></script>
    <script src="{{ asset('admin/js/page/modules-toastr.js') }}"></script>
    <script src="{{ asset('admin/library/sweetalert/dist/sweetalert.min.js') }}"></script>
    <script src="{{ asset('admin/js/page/modules-sweetalert.js') }}"></script>

    <script>
        $(document).on('click', '.hapus', function() {
            let id = $(this).attr('data-id');
            $("#formHapus").attr('action', `/barangmasuk/${id}`);
        });

        // Fungsi untuk pencarian
        $(document).ready(function() {
            $("#searchInput").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#listingTable tr").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });
    </script>
@endpush