@extends('mitra.layouts.app')

@section('title', 'Tambah Barang Inventory - ' . $sppg->nama)

@section('content')
    <div class="mb-6">
        <a href="{{ route('mitra.monitoring.show', $sppg) }}" class="inline-flex items-center text-emerald-600 dark:text-emerald-400 hover:text-emerald-700 font-medium mb-4">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
            Kembali ke Monitoring
        </a>
        <h1 class="text-2xl font-bold text-slate-900 dark:text-white">Tambah Barang Inventory</h1>
        <p class="text-sm text-slate-500 dark:text-gray-400 mt-1">{{ $sppg->nama }}</p>
    </div>

    @if(session('success'))
        <div class="mb-4 p-4 bg-emerald-100 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-800 text-emerald-800 dark:text-emerald-200 rounded-xl">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="mb-4 p-4 bg-rose-100 dark:bg-rose-900/30 border border-rose-200 dark:border-rose-800 text-rose-800 dark:text-rose-200 rounded-xl">{{ session('error') }}</div>
    @endif
    @if(session('import_errors') && count(session('import_errors')) > 0)
        <div class="mb-4 p-4 bg-amber-100 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 text-amber-800 dark:text-amber-200 rounded-xl">
            <p class="font-medium mb-2">Error saat import:</p>
            <ul class="list-disc list-inside text-sm space-y-1">
                @foreach(session('import_errors') as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- Import dari Excel/CSV --}}
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-slate-200 dark:border-gray-700 p-6 mb-6">
        <h2 class="text-lg font-semibold text-slate-900 dark:text-white mb-3">Import dari Excel</h2>
        <p class="text-sm text-slate-500 dark:text-gray-400 mb-4">Import banyak data sekaligus dari file CSV. Simpan file Excel sebagai CSV (UTF-8) terlebih dahulu.</p>
        <form action="{{ route('mitra.inventory-barang.import.store', $sppg) }}" method="POST" enctype="multipart/form-data" class="flex flex-wrap items-end gap-4">
            @csrf
            <div class="flex-1 min-w-[200px]">
                <input type="file" name="file" id="file" required accept=".csv,.txt"
                    class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-emerald-50 file:text-emerald-700 dark:file:bg-emerald-900/30 dark:file:text-emerald-300 hover:file:bg-emerald-100">
            </div>
            <div class="flex gap-3">
                <a href="{{ route('mitra.inventory-barang.template', $sppg) }}" class="px-4 py-2.5 border border-slate-300 dark:border-gray-600 text-slate-700 dark:text-gray-300 rounded-xl hover:bg-slate-50 dark:hover:bg-gray-700 transition text-sm font-medium inline-flex items-center">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
                    Download Template
                </a>
                <button type="submit" class="px-4 py-2.5 bg-emerald-600 text-white rounded-xl hover:bg-emerald-700 transition text-sm font-medium inline-flex items-center">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" /></svg>
                    Import CSV
                </button>
            </div>
        </form>
        <p class="mt-2 text-xs text-slate-500 dark:text-gray-400">Kolom: Nama, Kategori, Jumlah, Satuan, Kondisi, Lokasi, Nilai Estimasi, Kontak WA Service, Keterangan. Baris pertama = header.</p>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-slate-200 dark:border-gray-700 p-6">
        <h2 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">Tambah Manual</h2>
        <form action="{{ route('mitra.inventory-barang.store', $sppg) }}" method="POST">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="md:col-span-2">
                    <label for="nama" class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-2">Nama Barang <span class="text-rose-500">*</span></label>
                    <input type="text" name="nama" id="nama" required maxlength="255" value="{{ old('nama', $item->nama ?? '') }}"
                        class="w-full px-4 py-2.5 border border-slate-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-emerald-500 @error('nama') border-rose-500 @enderror">
                    @error('nama')<p class="mt-1 text-sm text-rose-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="kategori" class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-2">Kategori</label>
                    <input type="text" name="kategori" id="kategori" maxlength="100" value="{{ old('kategori', $item->kategori ?? '') }}"
                        class="w-full px-4 py-2.5 border border-slate-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-emerald-500 @error('kategori') border-rose-500 @enderror">
                    @error('kategori')<p class="mt-1 text-sm text-rose-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="qty_baik" class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-2">Jumlah Baik</label>
                    <input type="number" name="qty_baik" id="qty_baik" min="0" step="0.01" value="{{ old('qty_baik', $item->qty_baik ?? 0) }}"
                        class="w-full px-4 py-2.5 border border-slate-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-emerald-500 @error('qty_baik') border-rose-500 @enderror">
                    @error('qty_baik')<p class="mt-1 text-sm text-rose-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="qty_rusak" class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-2">Jumlah Rusak</label>
                    <input type="number" name="qty_rusak" id="qty_rusak" min="0" step="0.01" value="{{ old('qty_rusak', $item->qty_rusak ?? 0) }}"
                        class="w-full px-4 py-2.5 border border-slate-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-emerald-500 @error('qty_rusak') border-rose-500 @enderror">
                    @error('qty_rusak')<p class="mt-1 text-sm text-rose-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="qty_perlu_perbaikan" class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-2">Jumlah Perlu Perbaikan</label>
                    <input type="number" name="qty_perlu_perbaikan" id="qty_perlu_perbaikan" min="0" step="0.01" value="{{ old('qty_perlu_perbaikan', $item->qty_perlu_perbaikan ?? 0) }}"
                        class="w-full px-4 py-2.5 border border-slate-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-emerald-500 @error('qty_perlu_perbaikan') border-rose-500 @enderror">
                    @error('qty_perlu_perbaikan')<p class="mt-1 text-sm text-rose-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="satuan" class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-2">Satuan</label>
                    <input type="text" name="satuan" id="satuan" maxlength="50" value="{{ old('satuan', $item->satuan ?? 'unit') }}"
                        class="w-full px-4 py-2.5 border border-slate-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-emerald-500 @error('satuan') border-rose-500 @enderror">
                    @error('satuan')<p class="mt-1 text-sm text-rose-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="lokasi" class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-2">Lokasi</label>
                    <input type="text" name="lokasi" id="lokasi" maxlength="255" value="{{ old('lokasi', $item->lokasi ?? '') }}"
                        class="w-full px-4 py-2.5 border border-slate-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-emerald-500 @error('lokasi') border-rose-500 @enderror">
                    @error('lokasi')<p class="mt-1 text-sm text-rose-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="nilai_estimasi" class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-2">Nilai Estimasi (Rp)</label>
                    <input type="number" name="nilai_estimasi" id="nilai_estimasi" min="0" step="1000" value="{{ old('nilai_estimasi', $item->nilai_estimasi ?? '') }}"
                        class="w-full px-4 py-2.5 border border-slate-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-emerald-500 @error('nilai_estimasi') border-rose-500 @enderror">
                    @error('nilai_estimasi')<p class="mt-1 text-sm text-rose-600">{{ $message }}</p>@enderror
                </div>
                <div class="md:col-span-2">
                    <label for="kontak_wa_service" class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-2">Kontak WA Service</label>
                    <input type="text" name="kontak_wa_service" id="kontak_wa_service" maxlength="50" value="{{ old('kontak_wa_service', $item->kontak_wa_service ?? '') }}" placeholder="08123456789"
                        class="w-full px-4 py-2.5 border border-slate-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-emerald-500 @error('kontak_wa_service') border-rose-500 @enderror">
                    @error('kontak_wa_service')<p class="mt-1 text-sm text-rose-600">{{ $message }}</p>@enderror
                </div>
                <div class="md:col-span-2">
                    <label for="keterangan" class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-2">Keterangan</label>
                    <textarea name="keterangan" id="keterangan" rows="3" class="w-full px-4 py-2.5 border border-slate-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-emerald-500 @error('keterangan') border-rose-500 @enderror">{{ old('keterangan', $item->keterangan ?? '') }}</textarea>
                    @error('keterangan')<p class="mt-1 text-sm text-rose-600">{{ $message }}</p>@enderror
                </div>
            </div>
            <div class="mt-6 flex items-center justify-end gap-3">
                <a href="{{ route('mitra.monitoring.show', $sppg) }}" class="px-5 py-2.5 border border-slate-300 dark:border-gray-600 text-slate-700 dark:text-gray-300 rounded-xl hover:bg-slate-50 dark:hover:bg-gray-700 transition">Batal</a>
                <button type="submit" class="px-5 py-2.5 bg-emerald-600 text-white rounded-xl hover:bg-emerald-700 transition font-medium">Simpan Barang</button>
            </div>
        </form>
    </div>
@endsection