@slot('title','Input pengadaan')
@slot('icon','edit')
@push('script-bottom')
{{-- select2 --}}
<script src="/assets/libs/select2/js/select2.min.js"></script>
@endpush

@push('style')
{{-- select2 --}}

<link href="/assets/libs/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
@endpush
<div class="row">
    <div class="col-lg-12 ">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div class="">
                        <div class="search-box d-inline-block mx-auto ">
                            <div class="position-relative">
                                <input type="text" class="form-control" placeholder="Search..." wire:model="search">
                                <i class="bx bx-search-alt search-icon"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mx-0 px-0 ">
                        <div class="position-relative">
                            <select onmouseover="$(this).select2()" onchange="@this.set('status', this.value)" class="form-select select2" id="kategori"  style="width:300px">
                                <option value=""> Semua Status </option>
                                <option  @if($status == "proses") selected @endif value="proses"> Proses</option>
                                <option @if($status == "selesai") selected @endif value="selesai"> Selesai</option>
                            </select>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-9">
                        <div class="table-responsive pt-2">
                            <table class="table table-hover dt-responsive nowrap table-sm" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead class="table-light">
                                    <tr>
                                        
                                        <th class="align-middle">No</th>
                                        <th class="align-middle">Nama Barang</th>
                                        <th class="align-middle">Merk</th>
                                        <th class="align-middle">Kategori</th>
                                        <th class="align-middle">Jumlah</th>
                                        <th class="align-middle">Lokasi Tujuan</th>
                                        <th class="align-middle">Tanggal</th>
                                        <th class="align-middle">Status <br> Rencana <br> Belanja</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php 
                                        $no = 1;
                                    @endphp
                                    @forelse($produk as $p)
                                    <tr style="cursor:pointer;" onclick="Turbolinks.visit('/rencana-belanja/detail/{{ $p->id }}')">
                                        
                                        <td>{{ $no++ }}</td>
                                        <td> {{ $p->produk->nama_barang }} </td>
                                        <td> {{ $p->produk->merk }} </td>
                                        <td> {{ $p->produk->kategori->nama_kategori }} </td>
                                        <td> {{ $p->jumlah_awal }} Unit</td>
                                        <td> {{ $p->lokasi->nama_lokasi }}  </td>
                                        <td> {{ $p->created_at->format('d F Y') }} </td>
                                        <td class="text-center align-middle"> <span class="badge @if($p->status_rencana_belanja == 'proses') bg-info @else bg-success @endif"> {{ $p->status_rencana_belanja }} </span> 
                                        </td>
                                    </tr>
                                    
                                    @empty
                                        <tr colspan="3">
                                            <td  colspan="7">
                                                <div class="border text-center align-middle p-5">
                                                    <h5>Belum ada Produk Dari Input</h5>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            <div class="float-end">
                                {{ $produk->links() }}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="d-grid gap-2">
                            <button   onclick="Turbolinks.visit('/input-pengadaan/tambah')" type="button" class="btn btn-success waves-effect waves-light"><i class="bx bx-upload"></i> Input Pengadaan</button>
                        </div>
                       @if ($produk->count())
                        <div class="row border mt-4">
                            <div class="col-md-4 p-3">
                                <h5> <i class='bx bx-check-circle bx-md text-success'></i> {{ $produk->where('status_rencana_belanja','selesai')->count() }}</h5>
                            </div>
                            <div class="col-md-4 p-3">
                                <h5><i class='bx bx-hourglass bx-md text-info'></i> {{ $produk->where('status_rencana_belanja','proses')->count() }}</h5>
                            </div>
                        </div>
                       @else
                            <div class="mt-3">
                                <div class="text-center p-4 border">
                                    <h5 class="text-secondary">Belum ada Produk</h5>
                                    </div>
                                </div>
                            </div>
                        @endif
                </div>
                <!-- end table-responsive -->
            </div>
        </div>

    </div>
   
</div>