<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>Langkah 2: Tentukan Jumlah - {{ config('app.name', 'Laravel') }}</title>
    <link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">

    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

    <style>
        :root {
            --bg: #eef4ff;
            --panel: rgba(255, 255, 255, 0.9);
            --text: #172554;
            --muted: #64748b;
            --line: #dbe6f7;
            --primary: #4f46e5;
            --secondary: #2563eb;
            --cyan: #38bdf8;
            --shadow-soft: 0 28px 55px rgba(59, 84, 145, 0.1);
            --font-main: 'Inter', system-ui, -apple-system, sans-serif;
        }

        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: var(--font-main);
            color: var(--text);
            background:
                radial-gradient(circle at top left, rgba(79, 70, 229, 0.08), transparent 20%),
                radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 22%),
                linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
            -webkit-font-smoothing: antialiased;
        }

        .app { display: flex; min-height: 100vh; }
        .content { flex: 1; width: 100%; padding: 28px; }
        .shell { max-width: 1120px; margin: 0 auto; display: grid; gap: 20px; }
        .surface { background: var(--panel); border: 1px solid rgba(255,255,255,.82); box-shadow: var(--shadow-soft); backdrop-filter: blur(16px); }
        .hero-card, .form-card { border-radius: 32px; overflow: hidden; }
        .hero-card {
            padding: 26px;
            background:
                radial-gradient(circle at top right, rgba(99, 102, 241, 0.14), transparent 22%),
                linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(243,247,255,.96) 100%);
        }
        .pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: linear-gradient(135deg, rgba(79,70,229,.10), rgba(37,99,235,.08)); color: var(--primary); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; border: 1px solid rgba(99,102,241,.10); }
        .hero-title { margin: 16px 0 8px; font-size: clamp(30px, 4vw, 44px); line-height: .98; letter-spacing: -.05em; font-weight: 900; }
        .hero-text { margin: 0; color: var(--muted); line-height: 1.8; font-size: 14px; max-width: 720px; }
        .step-row { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
        .step-chip { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 12px 14px; border-radius: 20px; background: rgba(255,255,255,.78); border: 1px solid var(--line); color: #64748b; font-weight: 800; font-size: 13px; }
        .step-chip.active { color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-color: transparent; box-shadow: 0 18px 28px rgba(79,70,229,.22); }
        .step-number { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: rgba(79,70,229,.1); color: var(--primary); flex-shrink: 0; }
        .active .step-number { background: rgba(255,255,255,.18); color: #fff; }

        .form-card { background: rgba(255,255,255,.94); }
        .form-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(280px, .55fr); gap: 22px; padding: 24px; }
        .item-panel, .quantity-panel { border-radius: 28px; border: 1px solid rgba(219,230,247,.95); background: linear-gradient(180deg, rgba(248,251,255,.96), rgba(255,255,255,.98)); padding: 18px; }
        .section-title { margin: 0; color: #172554; font-size: 20px; font-weight: 900; letter-spacing: -.04em; }
        .section-text { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
        .selected-card { margin-top: 18px; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: stretch; }
        .thumb { min-height: 190px; border-radius: 24px; overflow: hidden; border: 1px solid rgba(219,230,247,.95); background: radial-gradient(circle at top left, rgba(79,70,229,.12), transparent 30%), linear-gradient(180deg, #f8fbff, #eef4ff); display: flex; align-items: center; justify-content: center; color: #94a3b8; }
        .thumb img { width: 100%; height: 100%; object-fit: cover; }
        .item-name { color: #0f172a; font-size: 24px; line-height: 1.05; font-weight: 900; letter-spacing: -.04em; }
        .item-sku { margin-top: 8px; color: #64748b; font-size: 13px; font-weight: 800; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
        .meta-row { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
        .meta-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; border: 1px solid transparent; }
        .meta-pill.divisi { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
        .meta-pill.stock { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
        .quantity-box { margin-top: 18px; }
        .label { display: block; margin-bottom: 8px; color: #334155; font-size: 13px; font-weight: 900; }
        .input-wrap { position: relative; }
        .input { width: 100%; min-height: 62px; border: 1px solid var(--line); border-radius: 22px; padding: 0 76px 0 18px; color: #172554; outline: none; font-size: 26px; font-weight: 900; box-shadow: 0 14px 26px rgba(148,163,184,.10); }
        .input:focus { border-color: rgba(79,70,229,.38); box-shadow: 0 0 0 4px rgba(79,70,229,.1); }
        .unit { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 13px; font-weight: 900; }
        .hint { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
        .error { margin-top: 10px; color: #dc2626; font-size: 13px; font-weight: 700; }
        .footer-actions { padding: 20px 24px; border-top: 1px solid rgba(219,230,247,.95); display: flex; justify-content: space-between; gap: 12px; background: rgba(248,251,255,.88); }
        .action-btn, .submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 18px; text-decoration: none; font-size: 14px; font-weight: 900; transition: all .2s ease; }
        .action-btn { color: var(--text); background: #fff; border: 1px solid var(--line); }
        .submit-btn { color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); border: none; box-shadow: 0 18px 28px rgba(79,70,229,.24); cursor: pointer; }
        .submit-btn:hover, .action-btn:hover { transform: translateY(-1px); }

        @media (max-width: 1024px) { .app { display: block; } .content { padding: 20px; padding-top: 84px; } .form-layout { grid-template-columns: 1fr; } }
        @media (max-width: 720px) { .content { padding: 16px; padding-top: 84px; } .hero-card, .form-card { border-radius: 24px; } .step-row, .selected-card { grid-template-columns: 1fr; } .footer-actions { flex-direction: column; } .action-btn, .submit-btn { width: 100%; } }
    </style>
</head>

<body>
    <div class="app">
        @include('partials.sidebar')

        <main class="content">
            <div class="shell">
                <section class="hero-card surface">
                    <span class="pill">Request Baru</span>
                    <h1 class="hero-title">Tentukan Jumlah</h1>
                    <p class="hero-text">Pastikan jumlah barang yang dipinjam sesuai kebutuhan dan masih dalam batas stok tersedia.</p>
                    <div class="step-row">
                        <div class="step-chip"><span class="step-number">1</span> Pilih Barang</div>
                        <div class="step-chip active"><span class="step-number">2</span> Tentukan Jumlah</div>
                        <div class="step-chip"><span class="step-number">3</span> Jadwal & Keterangan</div>
                    </div>
                </section>

                <section class="form-card surface">
                    <form action="{{ route('borrow.store.quantity') }}" method="POST">
                        @csrf
                        <div class="form-layout">
                            <div class="item-panel">
                                <h2 class="section-title">Barang Dipilih</h2>
                                <p class="section-text">Ini item yang akan diajukan dalam request peminjaman.</p>
                                <div class="selected-card">
                                    <div class="thumb">
                                        @if($item->image && Storage::disk('public')->exists($item->image))
                                        <img src="{{ asset('storage/' . $item->image) }}" alt="{{ $item->nama }}">
                                        @else
                                        <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-8h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                        </svg>
                                        @endif
                                    </div>
                                    <div>
                                        <div class="item-name">{{ $item->nama }}</div>
                                        <div class="item-sku">{{ $item->sku ?: '-' }}</div>
                                        <p class="section-text">{{ $item->deskripsi ?: 'Tidak ada deskripsi barang.' }}</p>
                                        <div class="meta-row">
                                            <span class="meta-pill divisi">{{ $item->divisi->nama ?? 'Umum' }}</span>
                                            <span class="meta-pill stock">{{ $item->jumlah }} tersedia</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="quantity-panel">
                                <h2 class="section-title">Jumlah Pinjam</h2>
                                <p class="section-text">Isi jumlah unit yang ingin dipakai.</p>
                                <div class="quantity-box">
                                    <label for="jumlah" class="label">Jumlah <span class="text-red-500">*</span></label>
                                    <div class="input-wrap">
                                        <input type="number" name="jumlah" id="jumlah" value="1" min="1" max="{{ $item->jumlah }}" class="input" required autofocus>
                                        <span class="unit">unit</span>
                                    </div>
                                    <p class="hint">Maksimal peminjaman: {{ $item->jumlah }} unit.</p>
                                    @error('jumlah')
                                    <p class="error">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="footer-actions">
                            <a href="{{ route('borrow.select') }}" class="action-btn">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                                </svg>
                                Kembali
                            </a>
                            <button type="submit" class="submit-btn">
                                Lanjut ke Tanggal
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                                </svg>
                            </button>
                        </div>
                    </form>
                </section>
            </div>
        </main>
    </div>
</body>

</html>
