<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Riwayat Restok - {{ $produk->nama_produk }}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * { font-family: 'Inter', sans-serif; }
        .btn-primary {
            background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
            transition: all 0.3s ease;
        }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(249,115,22,0.3); }
        .nav-link { transition: all 0.2s; padding: 0.5rem 1rem; border-radius: 0.5rem; display: inline-flex; align-items: center; gap: 0.5rem; }
        .nav-link:hover { background-color: #fff7ed; color: #ea580c; }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: 18px;
            top: 40px;
            bottom: -12px;
            width: 2px;
            background: #f3f4f6;
        }
        .timeline-item:last-child::before { display: none; }
    </style>
</head>

<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">

    <!-- KONTEN - FULL WIDTH -->
    <div class="w-full px-4 sm:px-6 lg:px-8 py-8">

 {{-- PRODUK INFO CARD - FULL WIDTH --}}
<div class="relative bg-gradient-to-r from-orange-500 via-orange-600 to-orange-700 rounded-2xl p-6 text-white shadow-lg mb-6 w-full overflow-hidden">
    {{-- Background Decorations --}}
    <div class="absolute top-0 right-0 w-64 h-64 opacity-10">
        <i class="fas fa-box text-8xl absolute top-10 right-10"></i>
        <i class="fas fa-tag text-7xl absolute bottom-0 right-32"></i>
        <i class="fas fa-cube text-6xl absolute top-20 right-48"></i>
    </div>
    
    @php
        $firstFoto = null;
        if ($produk->foto) {
            foreach (explode('|', $produk->foto) as $item) {
                if (str_contains($item, ':')) {
                    [, $firstFoto] = explode(':', $item);
                    break;
                }
            }
        }
        $stokStatus = $produk->stok == 0 ? 'bg-red-500' : ($produk->stok <= 5 ? 'bg-yellow-400' : 'bg-green-500');
    @endphp

    <div class="relative flex flex-col lg:flex-row items-start lg:items-center gap-6">
        {{-- Gambar Produk --}}
        <div class="w-24 h-24 rounded-2xl overflow-hidden bg-white/20 flex-shrink-0 shadow-inner border-2 border-white/30">
            @if($firstFoto && file_exists(public_path('storage/'.$firstFoto)))
                <img src="{{ asset('storage/'.$firstFoto) }}" class="w-full h-full object-cover" alt="{{ $produk->nama_produk }}">
            @else
                <div class="w-full h-full flex items-center justify-center">
                    <i class="fas fa-image text-white/60 text-3xl"></i>
                </div>
            @endif
        </div>

        {{-- Info Produk --}}
        <div class="flex-1">
            <div class="flex items-center gap-2 mb-1">
                <h2 class="text-2xl md:text-3xl font-bold text-white">{{ $produk->nama_produk }}</h2>
                <div class="w-3 h-3 rounded-full {{ $stokStatus }}"></div>
            </div>
            <p class="text-orange-100 text-sm md:text-base flex items-center gap-1">
                <i class="fas fa-tag text-xs"></i>
                {{ $produk->kategori->nama ?? 'Tanpa Kategori' }}
            </p>
            <div class="flex flex-wrap items-center gap-3 mt-3">
                <div class="bg-white/20 backdrop-blur-sm px-4 py-1.5 rounded-xl text-sm font-semibold flex items-center gap-2">
                    <i class="fas fa-layer-group"></i>
                    <span>Stok:</span>
                    <span class="font-bold">{{ $produk->stok }}</span>
                    <span class="text-orange-200 text-xs">unit</span>
                </div>
                <div class="bg-white/20 backdrop-blur-sm px-4 py-1.5 rounded-xl text-sm font-semibold flex items-center gap-2">
                    <i class="fas fa-money-bill-wave"></i>
                    <span>Rp {{ number_format($produk->harga, 0, ',', '.') }}</span>
                </div>
                <div class="flex items-center gap-1">
                    <span class="text-orange-100 text-xs">Status:</span>
                    <span class="text-sm font-medium">
                        {{ $produk->stok == 0 ? 'Habis' : ($produk->stok <= 5 ? 'Stok Menipis' : 'Tersedia') }}
                    </span>
                </div>
            </div>
        </div>

        {{-- Tombol Aksi --}}
        <div class="flex-shrink-0 flex flex-wrap items-center gap-3">
            <button onclick="document.getElementById('modalRestok').style.display='flex'"
                class="inline-flex items-center gap-2 border-2 border-gray-300 text-gray-600 bg-white px-6 py-2.5 rounded-xl font-semibold hover:border-gray-400 transition-all action-btn">
                <i class="fas fa-plus-circle"></i>
                <span>Tambah Stok Produk</span>
            </button>
        </div>
    </div>
</div>

        <!-- RIWAYAT RESTOK - FULL WIDTH -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden w-full">
            <div class="p-5 border-b border-gray-100 flex items-center gap-3">
                <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-history text-purple-500"></i>
                </div>
                <div>
                    <h3 class="font-bold text-gray-800">Riwayat Restok</h3>
                    <p class="text-xs text-gray-500">{{ $riwayat->count() }} catatan terakhir</p>
                </div>
            </div>

            @if($riwayat->isEmpty())
                <div class="p-12 text-center">
                    <i class="fas fa-history text-gray-300 text-5xl mb-4"></i>
                    <h4 class="font-bold text-gray-600 text-lg mb-1">Belum Ada Riwayat</h4>
                    <p class="text-gray-500 text-sm">Produk ini belum pernah direstok.</p>
                </div>
            @else
                <div class="p-5 space-y-3">
                    @foreach($riwayat as $log)
                        <div class="relative timeline-item pl-12">
                            <!-- ICON -->
                            <div class="absolute left-0 top-1 w-9 h-9 bg-green-100 rounded-full flex items-center justify-center">
                                <i class="fas fa-plus text-green-600 text-xs"></i>
                            </div>

                            <!-- CONTENT -->
                            <div class="bg-gray-50 rounded-xl p-4 border border-gray-100">
                                <div class="flex items-start justify-between gap-3">
                                    <div>
                                        <div class="flex items-center gap-3">
                                            <span class="text-gray-500 text-sm">{{ $log->stok_sebelum }} unit</span>
                                            <i class="fas fa-arrow-right text-gray-400 text-xs"></i>
                                            <span class="font-bold text-green-600 text-lg">{{ $log->stok_sesudah }} unit</span>
                                        </div>
                                        @if($log->catatan)
                                            <p class="text-sm text-gray-500 mt-1 italic">
                                                <i class="fas fa-quote-left text-xs mr-1"></i>
                                                {{ $log->catatan }}
                                            </p>
                                        @endif
                                        <p class="text-xs text-gray-400 mt-1">
                                            <i class="fas fa-user mr-1"></i>
                                            {{ $log->user->name ?? 'Unknown' }} &bull;
                                            {{ $log->created_at->format('d M Y, H:i') }}
                                            ({{ $log->created_at->diffForHumans() }})
                                        </p>
                                    </div>
                                    <span class="bg-green-100 text-green-700 text-sm font-bold px-3 py-1.5 rounded-full flex-shrink-0">
                                        +{{ $log->jumlah_tambah }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

{{-- BOTTOM ACTIONS --}}
<div class="flex items-center justify-center mt-6 pt-5 border-t border-black" style="border-top-width: 1px; border-top-style: solid; border-top-color: #000000;">
    <div class="flex gap-4">
        <a href="{{ route('restok.index') }}" 
        class="inline-flex items-center gap-2 px-6 py-3 bg-gray-500 hover:bg-gray-600 text-white rounded-xl font-semibold transition-all shadow-md hover:shadow-lg transform hover:scale-105 duration-200">
            <i class="fas fa-arrow-left text-sm"></i> 
            <span>Kembali Ke Restok</span>
        </a>
    </div>
</div>
    </div>

    <!-- MODAL TAMBAH STOK -->
    <div id="modalRestok" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4"
        style="display:none">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md">
        {{-- MODAL HEADER --}}
<div class="relative bg-gradient-to-r from-orange-500 via-orange-600 to-orange-700 p-5 rounded-t-2xl overflow-hidden">
    {{-- Background Decoration --}}
    <div class="absolute top-0 right-0 w-24 h-24 opacity-10">
        <i class="fas fa-boxes text-6xl absolute top-2 right-2"></i>
    </div>
    
    <div class="relative flex items-center justify-between">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                <i class="fas fa-boxes text-white text-lg"></i>
            </div>
            <h3 class="text-white font-bold text-xl">Tambah Stok</h3>
        </div>
        <button onclick="document.getElementById('modalRestok').style.display='none'"
            class="text-white/70 hover:text-white transition-all duration-200 p-2 hover:bg-white/20 rounded-xl">
            <i class="fas fa-times text-lg"></i>
        </button>
    </div>
    <p class="text-orange-100 text-xs mt-2 ml-12">Isi jumlah stok yang akan ditambahkan</p>
</div>

            <form action="{{ route('restok.store') }}" method="POST">
                @csrf
                <input type="hidden" name="produk_id" value="{{ $produk->id }}">
                <div class="p-5 space-y-4">

                    <!-- STOK SAAT INI -->
                    <div class="bg-orange-50 border border-orange-200 rounded-lg p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-xs text-gray-500 mb-1">Stok Saat Ini</p>
                                <p class="text-2xl font-bold text-orange-600" id="stokNow">{{ $produk->stok }}</p>
                                <p class="text-xs text-gray-500">unit tersedia</p>
                            </div>
                            <div class="w-14 h-14 bg-orange-100 rounded-xl flex items-center justify-center">
                                <i class="fas fa-layer-group text-orange-500 text-2xl"></i>
                            </div>
                        </div>
                    </div>

                    <!-- JUMLAH TAMBAH -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-plus-circle text-green-500 mr-1"></i>
                            Jumlah Tambah Stok
                        </label>
                        <div class="flex items-center gap-3">
                            <button type="button" onclick="decrement()"
                                class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center text-gray-700 hover:bg-gray-200 transition text-lg font-bold">−</button>
                            <input type="number" name="jumlah_tambah" id="jmlTambah"
                                value="1" min="1" max="10000"
                                oninput="previewUpdate()"
                                class="flex-1 text-center border border-gray-300 rounded-lg px-3 py-2.5 text-lg font-bold focus:outline-none focus:ring-2 focus:ring-orange-500" required>
                            <button type="button" onclick="increment()"
                                class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center text-gray-700 hover:bg-gray-200 transition text-lg font-bold">+</button>
                        </div>
                        <div class="flex gap-2 mt-2">
                            @foreach([5, 10, 25, 50, 100] as $qty)
                                <button type="button" 
                                    data-qty="{{ $qty }}"
                                    onclick="setQ(this.dataset.qty)"
                                    class="flex-1 text-xs bg-gray-100 text-gray-600 py-1.5 rounded-lg hover:bg-orange-100 hover:text-orange-600 transition font-medium">
                                    +{{ $qty }}
                                </button>
                            @endforeach
                        </div>
                    </div>

                    <!-- PREVIEW -->
                    <div class="bg-green-50 border border-green-200 rounded-lg p-3">
                        <div class="flex items-center justify-between">
                            <div class="text-sm text-gray-600">
                                <span class="font-medium">{{ $produk->stok }}</span>
                                <i class="fas fa-arrow-right mx-2 text-gray-400"></i>
                                <span class="font-bold text-green-600 text-lg" id="prevAfter">{{ $produk->stok + 1 }}</span>
                                <span class="text-xs text-gray-500 ml-1">unit</span>
                            </div>
                            <span class="bg-green-100 text-green-700 text-xs font-bold px-2 py-1 rounded-full" id="prevPlus">+1</span>
                        </div>
                    </div>

                    <!-- CATATAN -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            Catatan <span class="text-gray-400 font-normal">(opsional)</span>
                        </label>
                        <textarea name="catatan" rows="2" placeholder="Contoh: Restock dari supplier..."
                            class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 resize-none"></textarea>
                    </div>
                </div>

                <div class="p-5 pt-0 flex gap-3">
                    <button type="submit"
                        class="flex-1 btn-primary text-white py-3 rounded-xl font-semibold flex items-center justify-center gap-2 shadow-lg">
                        <i class="fas fa-save"></i>Simpan
                    </button>
                    <button type="button"
                        onclick="document.getElementById('modalRestok').style.display='none'"
                        class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-xl font-semibold hover:bg-gray-200 transition">
                        Batal
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        const stokAwal = parseInt(document.body.dataset.stok);
        function increment() {
            const el = document.getElementById('jmlTambah');
            el.value = (parseInt(el.value) || 0) + 1;
            previewUpdate();
        }
        function decrement() {
            const el = document.getElementById('jmlTambah');
            el.value = Math.max(1, (parseInt(el.value) || 0) - 1);
            previewUpdate();
        }
        function setQ(n) {
            document.getElementById('jmlTambah').value = n;
            previewUpdate();
        }
        function previewUpdate() {
            const jumlah = parseInt(document.getElementById('jmlTambah').value) || 0;
            document.getElementById('prevAfter').textContent = stokAwal + jumlah;
            document.getElementById('prevPlus').textContent = '+' + jumlah;
        }

        // Close modal on backdrop click
        document.getElementById('modalRestok').addEventListener('click', function(e) {
            if (e.target === this) this.style.display = 'none';
        });
    </script>

    @if (session('success') || session('error'))
    <div id="toast-notification"
        class="fixed bottom-6 right-6 z-50 flex items-center gap-3 bg-white border {{ session('success') ? 'border-green-200' : 'border-red-200' }} shadow-2xl rounded-2xl px-5 py-4 max-w-sm w-full"
        style="animation: slideInRight 0.4s ease;">
        <div class="w-10 h-10 {{ session('success') ? 'bg-green-500' : 'bg-red-500' }} rounded-xl flex items-center justify-center flex-shrink-0">
            <i class="fas {{ session('success') ? 'fa-check' : 'fa-exclamation' }} text-white text-sm"></i>
        </div>
        <div class="flex-1 min-w-0">
            <p class="toast-title font-semibold text-gray-800 text-sm">{{ session('success') ? 'Berhasil!' : 'Gagal!' }}</p>
            <p class="toast-message text-gray-500 text-xs mt-0.5 truncate">{{ session('success') ?? session('error') }}</p>
        </div>
        <button onclick="closeToast()" class="text-gray-400 hover:text-gray-600 flex-shrink-0 ml-1">
            <i class="fas fa-times text-xs"></i>
        </button>
        <div class="absolute bottom-0 left-0 h-1 {{ session('success') ? 'bg-green-500' : 'bg-red-500' }} rounded-b-2xl" id="toastProgress"
            style="width: 100%; transition: width 5s linear;"></div>
    </div>

    <style>
    @keyframes slideInRight {
        from { opacity: 0; transform: translateX(100px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes slideOutRight {
        from { opacity: 1; transform: translateX(0); }
        to   { opacity: 0; transform: translateX(100px); }
    }
    </style>

    <script>
        setTimeout(() => {
            const bar = document.getElementById('toastProgress');
            if (bar) bar.style.width = '0%';
        }, 100);
        setTimeout(() => closeToast(), 5100);
        function closeToast() {
            const toast = document.getElementById('toast-notification');
            if (toast) {
                toast.style.animation = 'slideOutRight 0.3s ease forwards';
                setTimeout(() => toast.remove(), 300);
            }
        }
    </script>
    @endif
</body>
</html>
