<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Kontrol Stok</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Poppins', sans-serif; background-color: #fcfcfc; margin: 0; }
        .main-wrapper { display: flex; height: 100vh; overflow: hidden; }

        /* SIDEBAR */
        .sidebar { 
            width: 240px; 
            background: #fff;
            border-right: 1px solid #eee; 
            display: flex; 
            flex-direction: column; 
            padding: 25px 0;
            flex-shrink: 0;
            height: 100vh;
        }
        
        .brand { font-size: 22px; font-weight: 700; padding: 0 25px 30px; letter-spacing: -0.5px; }
        
        .nav-menu { list-style: none; padding: 0; flex-grow: 1; }
        .nav-item { padding: 2px 25px; }
        
        /* LINK DEFAULT (Warna hitam, bukan abu-abu) */
        .nav-link { 
            text-decoration: none; 
            color: #333 !important; 
            font-size: 14px; 
            padding: 12px 15px; 
            border-radius: 8px; 
            display: flex; 
            align-items: center; 
            transition: 0.2s;
        }

        /* KOTAK HIJAU SAAT AKTIF */
        .nav-link.active { 
            background: #28a745 !important; /* Hijau Solid */
            color: #fff !important;         /* Teks Putih agar kontras */
            font-weight: 600; 
        }

        /* Mencegah warna biru bawaan bootstrap saat diklik/focus */
        .nav-link:hover { background: #f8f9fa; }
        .nav-link:focus { background: transparent; }
        .nav-link.active:hover { background: #28a745 !important; }

        .nav-link i { margin-right: 12px; width: 18px; font-size: 15px; }
        
        .sidebar-footer { padding: 0 25px; }
        .logout-btn { 
            background: none; border: none; color: #dc3545; font-size: 14px; 
            padding: 10px 15px; cursor: pointer; display: flex; align-items: center; width: 100%;
        }
        .logout-btn i { margin-right: 12px; }

        .content { flex-grow: 1; padding: 20px 40px; overflow-y: auto; height: 100vh; }

        .card-stat { border: 1px solid #eee; border-radius: 8px; padding: 15px; background: #fff; }
        .table-card { border: 1px solid #eee; border-radius: 8px; background: #fff; }
        .btn-outline-secondary { border-color: #dee2e6; color: #6c757d; }
        .btn-outline-secondary.active { background-color: #e9ecef; color: #000; }

        /* Styling Header yang rapi */
        .top-header { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            margin-bottom: 30px; 
            padding-bottom: 20px;
            border-bottom: 2px solid #eee;
            /* Menarik garis ke kiri dan kanan agar menembus padding konten */
            margin-left: -40px;  
            margin-right: -40px; 
            
            /* Memberi padding agar isi header tidak ikut menempel ke pinggir */
            padding-left: 40px;  
            padding-right: 40px;
        }
        .search-bar { 
            width: 350px; 
            padding: 8px 15px; 
            border: 1px solid #ddd; 
            border-radius: 8px; 
            font-size: 14px;
            background: #fdfdfd;
        }
        .user-panel { display: flex; align-items: center; gap: 20px; }
        
    </style>
</head>
<body>

    <div class="main-wrapper">
        <div class="sidebar">
        <div class="brand">TEH TARIK 99</div>
        
        <ul class="nav-menu">
            <li class="nav-item">
                <a href="/admin/dashboard" class="nav-link {{ request()->is('admin/dashboard') ? 'active' : '' }}">
                    <i class="fa fa-home"></i> Dashboard
                </a>
            </li>
            <li class="nav-item">
                <a href="/admin/produk" class="nav-link {{ request()->is('admin/produk') ? 'active' : '' }}">
                    <i class="fa fa-box"></i> Produk
                </a>
            </li>
            <li class="nav-item">
                <a href="/admin/resep" class="nav-link {{ request()->is('admin/resep') ? 'active' : '' }}">
                    <i class="fa fa-cubes"></i> Atur Resep
                </a>
            </li>
            <li class="nav-item">
                <a href="/admin/kontrol-stok" class="nav-link {{ request()->is('admin/kontrol-stok') ? 'active' : '' }}">
                    <i class="fa fa-list-check"></i> Kontrol Stok
                </a>
            </li>
            <li class="nav-item">
                <a href="/admin/laporan" class="nav-link {{ request()->is('admin/laporan') ? 'active' : '' }}">
                    <i class="fa fa-chart-line"></i> Laporan
                </a>
            </li>
        </ul>

        <div class="sidebar-footer">
            <a href="#" class="nav-link"><i class="fa-solid fa-user"></i> Profil</a>
            <form action="{{ route('logout') }}" method="POST">
                @csrf
                <button type="submit" class="logout-btn"><i class="fa-solid fa-right-from-bracket"></i> Keluar</button>
            </form>
        </div>
    </div>

    <div class="content">
        <div class="top-header">
            <form id="formSearch" action="/admin/kontrol-stok" method="GET" class="d-flex">
                <input type="text" id="inputSearch" name="search" class="search-bar" 
                    placeholder="Search operational data..." 
                    value="{{ request('search') }}">
            </form>
            <div class="user-panel d-flex align-items-center gap-3">
                <i class="fa-solid fa-bell fs-5"></i>
                <div class="text-end" style="line-height: 1.2;">
                    <div class="fw-bold small">{{ auth()->user()->name }}</div>
                    <div class="text-muted" style="font-size: 0.7rem;">Kasir</div>
                </div>
                <img src="https://ui-avatars.com/api/?name={{ urlencode(auth()->user()->name) }}&background=448b39&color=fff" 
                    class="user-avatar" style="width: 40px; height: 40px; border-radius: 50%;">
            </div>
        </div>

        <div class="main-scroll">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4 class="fw-bold m-0">Stok Bahan Baku</h4>
                    @php
                        date_default_timezone_set('Asia/Jakarta');
                        $jam = (int)date('H');
                        if ($jam >= 18) { $ucapan = "Selamat Malam"; }
                        elseif ($jam >= 15) { $ucapan = "Selamat Sore"; }
                        elseif ($jam >= 11) { $ucapan = "Selamat Siang"; }
                        else { $ucapan = "Selamat Pagi"; }

                        $hari = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
                        $bulan = ['', 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
                        $tanggalLengkap = $hari[date('w')] . ', ' . date('d') . ' ' . $bulan[date('n')] . ' ' . date('Y');
                    @endphp
                    <p class="text-muted small m-0">
                        {{ $tanggalLengkap }} | {{ $ucapan }}, {{ auth()->user()->name }}
                    </p>
                </div>

                <div class="d-flex justify-content-end mb-3">
                    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#tambahBahanModal">
                        + Tambah Bahan Baru
                    </button>
                </div>
            </div>

                

                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="card-stat shadow-sm border-0 d-flex align-items-center">
                            <div class="me-3 p-2 bg-primary bg-opacity-10 rounded"><i class="fa fa-box text-primary"></i></div>
                            <div>
                                <p class="text-muted small mb-0">TOTAL KOMODITAS</p>
                                <h4 class="fw-bold m-0">{{ $bahan->total() }} Item</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card-stat shadow-sm border-0 d-flex align-items-center">
                            <div class="me-3 p-2 bg-danger bg-opacity-10 rounded"><i class="fa fa-exclamation-triangle text-danger"></i></div>
                            <div>
                                <p class="text-danger small mb-0">STOK RENDAH</p>
                                <h4 class="fw-bold text-danger m-0">{{ $totalStokRendah }} Bahan</h4>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="table-card shadow-sm border-0 p-4">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="fw-bold">Daftar Bahan Baku</h5>
                        <div class="d-flex gap-2">
                            {{-- <button class="btn btn-outline-secondary btn-sm"><i class="fa fa-filter"></i></button> --}}
                            
                            <a href="{{ route('admin.stok.export') }}" class="btn btn-outline-secondary btn-sm">
                                <i class="fa fa-download"></i>
                            </a>
                        </div>
                    </div>
                    
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>NO</th>
                                    <th>NAMA BAHAN</th>
                                    <th>SISA STOK</th>
                                    <th>SATUAN</th>
                                    <th>STATUS BATAS AMAN</th>
                                    <th>AKSI</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($bahan as $index => $item)
                                <tr>
                                    <td>{{ $bahan->firstItem() + $index }}</td>
                                    <td class="fw-bold">{{ $item->nama_bahan }}</td>
                                    <td class="{{ $item->isStokRendah() ? 'text-danger fw-bold' : '' }}">{{ $item->stok }}</td>
                                    <td>{{ $item->satuan }}</td>
                                    <td>
                                        <span class="badge {{ $item->isStokRendah() ? 'bg-danger-subtle text-danger' : 'bg-success-subtle text-success' }}">
                                            {{ $item->isStokRendah() ? 'STOK RENDAH' : 'AMAN' }}
                                        </span>
                                    </td>
                                    <td>
                                        <button class="btn btn-link text-primary p-0 me-2" data-bs-toggle="modal" data-bs-target="#editModal{{$item->id}}">
                                            <i class="fa fa-pencil"></i>
                                        </button>
                                        
                                        <button class="btn btn-link text-success p-0 me-2" data-bs-toggle="modal" data-bs-target="#restockModal{{$item->id}}">
                                            <i class="fa fa-plus-circle"></i>
                                        </button>

                                        <form action="{{ route('admin.stok.destroy', $item->id) }}" method="POST" style="display:inline;">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn btn-link text-danger p-0" onclick="return confirm('Yakin?')"><i class="fa fa-trash"></i></button>
                                        </form>
                                    </td>
                                </tr>

                                <div class="modal fade" id="editModal{{$item->id}}" tabindex="-1">
                                    <div class="modal-dialog">
                                        <form action="{{ route('admin.stok.update', $item->id) }}" method="POST">
                                            @csrf @method('PUT')
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Edit Stok: {{ $item->nama_bahan }}</h5>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="mb-3">
                                                        <label>Nama Bahan:</label>
                                                        <input type="text" name="nama_bahan" class="form-control" value="{{ $item->nama_bahan }}" required>
                                                    </div>

                                                    <div class="mb-3">
                                                        <label>Stok:</label>
                                                        <input type="number" name="stok" class="form-control" value="{{ $item->stok }}" required>
                                                    </div>

                                                    <div class="mb-3">
                                                        <label>Satuan:</label>
                                                        <input type="text" name="satuan" class="form-control" value="{{ $item->satuan }}" placeholder="Contoh: pcs, kg, kaleng" required>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="submit" class="btn btn-primary">Simpan</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>

                                <div class="modal fade" id="restockModal{{$item->id}}" tabindex="-1">
                                    <div class="modal-dialog">
                                        <form action="{{ route('admin.stok.restock', $item->id) }}" method="POST">
                                            @csrf @method('PUT')
                                            <div class="modal-content">
                                                <div class="modal-header"><h5 class="modal-title">Restock: {{ $item->nama_bahan }}</h5></div>
                                                <div class="modal-body">
                                                    <p>Stok saat ini: <strong>{{ $item->stok }} {{ $item->satuan }}</strong></p>
                                                    <label>Jumlah Tambah Stok:</label>
                                                    <input type="number" name="stok_tambahan" class="form-control" required placeholder="Masukkan jumlah penambahan">
                                                </div>
                                                <div class="modal-footer"><button type="submit" class="btn btn-success">Tambah Stok</button></div>
                                            </div>
                                        </form>
                                    </div>
                                </div>

                                <div class="modal fade" id="tambahBahanModal" tabindex="-1">
                                    <div class="modal-dialog">
                                        <form action="{{ route('admin.stok.store') }}" method="POST">
                                            @csrf
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Tambah Bahan Baku Baru</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="mb-3">
                                                        <label>Nama Bahan:</label>
                                                        <input type="text" name="nama_bahan" class="form-control" required placeholder="Contoh: Gula Pasir">
                                                    </div>
                                                    <div class="mb-3">
                                                        <label>Stok Awal:</label>
                                                        <input type="number" name="stok" class="form-control" required placeholder="0">
                                                    </div>
                                                    <div class="mb-3">
                                                        <label>Satuan:</label>
                                                        <input type="text" name="satuan" class="form-control" required placeholder="Contoh: kg, gram, pcs">
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                                    <button type="submit" class="btn btn-primary">Simpan Bahan</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="mt-3">
                        {{ $bahan->links('pagination::bootstrap-5') }}
                    </div>
                </div>
        </div>

     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         // FUNGSI PENCARIAN OTOMATIS
         const inputSearch = document.getElementById('inputSearch');
         const formSearch = document.getElementById('formSearch');
         let timer;

         inputSearch.addEventListener('keyup', function() {
             clearTimeout(timer);
             // Simpan posisi kursor
             sessionStorage.setItem('cursorPos', inputSearch.selectionStart);
             
             timer = setTimeout(function() {
                 formSearch.submit();
             }, 500);
         });

         // Jaga Fokus setelah refresh
         document.addEventListener("DOMContentLoaded", function() {
             if (inputSearch && inputSearch.value.length > 0) {
                 inputSearch.focus();
                 let pos = sessionStorage.getItem('cursorPos');
                 if (pos !== null) {
                     inputSearch.setSelectionRange(pos, pos);
                     sessionStorage.removeItem('cursorPos');
                 }
             }
         });
     </script>
 </body>
 </html>