@slot('title', 'Perlengkapan Bed ' . $lokasi->nama_lokasi)
@slot('icon', 'detail')

<div class="px-1 mx-0 row justify-content-center g-1 bed-page">

    @push('style')
        <style>
            /* penyesuaian kecil untuk tampilan list */
            .bed-card .list-group-item {
                padding: .45rem .75rem;
            }

            .qty-input {
                width: 72px;
            }

            @media (max-width:420px) {
                .qty-input {
                    width: 60px
                }
            }
        </style>
    @endpush

    @push('script')
        <script>
            function validateJumlah(id, maxStok) {
                const input = document.getElementById('kotor_' + id);
                const error = document.getElementById('error_' + id);

                if (parseInt(input.value) > maxStok) {
                    error.classList.remove('d-none');
                    input.classList.add('is-invalid');
                } else {
                    error.classList.add('d-none');
                    input.classList.remove('is-invalid');
                }
            }
            function validateJumlahBersih(id, maxStok) {
                const input = document.getElementById('bersih_' + id);
                const error = document.getElementById('error_bersih_' + id);
                const error = document.getElementById('kirim');
                const error = document.getElementById('ambil');

                if (parseInt(input.value) > maxStok) {
                    error.classList.remove('d-none');
                    input.classList.add('is-invalid');
                } else {
                    error.classList.add('d-none');
                    input.classList.remove('is-invalid');
                }
            }
        </script>
    @endpush
    @slot('title', 'Perlengkapan Bed')
    @slot('icon', 'detail')
    <div wire:ignore class="px-1 container-fluid">

        <!-- Nav Tabs -->
        <ul class="mt-5 nav nav-tabs" id="bedTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="kotor-tab" data-bs-toggle="tab" data-bs-target="#kotor" type="button"
                    role="tab" aria-controls="kotor" aria-selected="true">
                    <span class="badge bg-danger me-1">Kotor</span> Kirim
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="bersih-tab" data-bs-toggle="tab" data-bs-target="#bersih" type="button"
                    role="tab" aria-controls="bersih" aria-selected="false">
                    <span class="badge bg-success me-1">Bersih</span> Ambil
                </button>
            </li>
        </ul>


        <!-- Tab Contents -->
        <div class="tab-content" id="bedTabContent">
            <!-- KOTOR TAB -->
            <div class="tab-pane fade show active" id="kotor" role="tabpanel" aria-labelledby="kotor-tab">
                <div class="row gy-3">
                    <div class="col-12">
                        <div class="shadow-sm card bed-card h-100">
                            <div class="card-header d-flex align-items-center justify-content-between">
                                <div class="gap-2 d-flex align-items-center">
                                    <span class="badge bg-danger rounded-pill">Kotor</span>
                                    <h6 class="mb-0 fw-bold">Dikirim ke cssd</h6>
                                </div>
                                <small class="text-muted">Tanggal: {{ date('d M Y') }}</small>
                            </div>

                            <ul class="list-group list-group-flush">

                                @foreach ($data as $item)
                                    <li class="list-group-item d-flex align-items-center justify-content-between">
                                        <div>
                                            <div class="fw-semibold">{{ $item->produk->nama_barang }} </div>
                                            <div class="text-muted small">
                                                {{ $item->jumlah_akhir . ' di lokasi ' . $lokasi->nama_lokasi }}</div>
                                        </div>

                                        <div class="gap-2 d-flex align-items-center">
                                            <input min="0" max="{{ $item->jumlah_akhir }}"
                                                name="kotor[{{ $item->id }}]" id="kotor_{{ $item->id }}"
                                                oninput="validateJumlah({{ $item->id }}, {{ $item->jumlah_akhir }})"
                                                type="number" class="form-control form-control-sm qty-input"
                                                style="width: 90px;" value="" min="0"
                                                wire:model="kotor.{{ $item->produk_id }}"
                                                aria-label="jumlah {{ $item->produk->nama_barang }} ">
                                                <small id="error_{{ $item->id }}" class="text-danger d-none">Jumlah melebihi stok maksimal!</small>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>

                            <div class="px-4 my-2 text-center">
                                <button
                                    onclick="
                            Swal.fire({
                                title: 'Yakin Kirim?',
                                text: 'barang sudah dikirim !',
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonText: 'Ya, Kirim!',
                                cancelButtonText: 'Batal'
                                }).then((result) => {
                                if (result.isConfirmed) {
                                    @this.save_kotor()  
                                }
                                });
                            
                            
                            "
                                    class="mb-1 btn btn-sm btn-outline-danger w-100 d-block">
                                    Kirim
                                </button>
                                <small class="text-muted d-block">
                                    Centang/ubah jumlah lalu klik "Kirim" untuk memindahkan ke cssd.
                                </small>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <!-- BERSIH TAB -->
            <div class="tab-pane fade" id="bersih" role="tabpanel" aria-labelledby="bersih-tab">
                <div class="row gy-3">
                    <div class="col-12">
                        <div class="shadow-sm card bed-card h-100">
                            <div class="card-header d-flex align-items-center justify-content-between">
                                <div class="gap-2 d-flex align-items-center">
                                    <span class="badge bg-success rounded-pill">Bersih</span>
                                    <h6 class="mb-0 fw-bold">Ambil dari cssd</h6>
                                </div>
                                <small class="text-muted">Ready: {{ now()->format('H:i') }}</small>
                            </div>

                            <ul class="list-group list-group-flush">

                                @foreach ($data as $item)
                                    <li class="list-group-item d-flex align-items-center justify-content-between">
                                        <div>
                                            <div class="fw-semibold">{{ $item->produk->nama_barang }} </div>
                                            <div class="text-muted small">
                                                {{ $item->jumlah_akhir . ' di ' . $lokasi->nama_lokasi }}

                                                @php
                                                    $jl = 0;
                                                    foreach ($data_cssd as $dl) {
                                                        if ($dl->produk_id == $item->produk_id) {
                                                            echo $dl->jumlah_akhir . ' di cssd';
                                                            $jl = $dl->jumlah_akhir;
                                                        }
                                                    }
                                                    
                                                @endphp

                                            </div>
                                        </div>

                                        <div class="gap-2 d-flex align-items-center">
                                             <div class="gap-2 d-flex align-items-center">
                                            <input min="0" max="{{ $item->jumlah_akhir }}"
                                                name="bersih[{{ $item->id }}]" id="bersih_{{ $item->id }}"
                                                oninput="validateJumlahBersih({{ $item->id }}, {{ $jl  }})"
                                                type="number" class="form-control form-control-sm qty-input"
                                                style="width: 90px;" value="" min="0"
                                                wire:model="bersih.{{ $item->produk_id }}"
                                                aria-label="jumlah {{ $item->produk->nama_barang }} ">
                                                <small id="error_bersih_{{ $item->id }}" class="text-danger d-none">Jumlah melebihi stok cssd!</small>
                                        </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>

                            <div class="px-4 my-2 text-center">
                                <button
                                    onclick="
                                    Swal.fire({
                                title: 'Yakin ngambil?',
                                text: 'Barang Sudah Di Ambil!',
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonText: 'Ya, Ambil!',
                                cancelButtonText: 'Batal'
                                }).then((result) => {
                                if (result.isConfirmed) {
                                    @this.save_bersih()  
                                }
                                });
                                    "
                                  id="ambil"  class="mb-1 btn btn-sm btn-outline-success w-100 d-block">
                                    Ambil
                                </button>
                                <small class="text-muted d-block">
                                    Centang/ubah jumlah lalu klik "Kirim" untuk memindahkan ke cssd.
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- Pastikan Bootstrap JS sudah ter-include di layout (bootstrap.bundle.min.js) -->



</div>