@extends('layouts.dashboard')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-2xl mx-auto">
        <div class="bg-white rounded-lg shadow-md p-6">
            <h1 class="text-2xl font-bold text-gray-800 mb-6">Edit Barang</h1>

            @if($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4">
                <ul class="list-disc list-inside">
                    @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            <form action="{{ route('barang.update', $barang) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="mb-4">
                    <label for="nama_barang" class="block text-gray-700 font-medium mb-2">Nama Barang</label>
                    <input type="text" name="nama_barang" id="nama_barang"
                        value="{{ old('nama_barang', $barang->nama_barang) }}"
                        class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
                        required>
                </div>

                <div class="mb-4">
                    <label for="deskripsi" class="block text-gray-700 font-medium mb-2">Deskripsi</label>
                    <textarea name="deskripsi" id="deskripsi" rows="4"
                        class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500">{{ old('deskripsi', $barang->deskripsi) }}</textarea>
                </div>

                <div class="mb-4">
                    <label for="kategori" class="block text-gray-700 font-medium mb-2">Kategori</label>
                    <select name="kategori" id="kategori" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500" required>
                        <option value="">Pilih Kategori</option>
                        <option value="Lampu" {{ old('kategori', $barang->kategori) == 'Lampu' ? 'selected' : '' }}>Lampu</option>
                        <option value="Kipas" {{ old('kategori', $barang->kategori) == 'Kipas' ? 'selected' : '' }}>Kipas</option>
                        <option value="Kulkas" {{ old('kategori', $barang->kategori) == 'Kulkas' ? 'selected' : '' }}>Kulkas</option>
                        <option value="TV" {{ old('kategori', $barang->kategori) == 'TV' ? 'selected' : '' }}>TV</option>
                        <option value="Magic Com" {{ old('kategori', $barang->kategori) == 'Magic Com' ? 'selected' : '' }}>Magic Com</option>
                        <option value="Mesin Cuci" {{ old('kategori', $barang->kategori) == 'Mesin Cuci' ? 'selected' : '' }}>Mesin Cuci</option>
                        <option value="Kompor" {{ old('kategori', $barang->kategori) == 'Kompor' ? 'selected' : '' }}>Kompor</option>
                    </select>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div>
                        <label for="harga_display" class="block text-gray-700 font-medium mb-2">Harga</label>
                        <div class="relative">
                            <span class="absolute left-3 top-2 text-gray-500">Rp</span>
                            <input type="text" name="harga_display" id="harga_display"
                                value="{{ old('harga', $barang->harga) }}"
                                class="w-full pl-10 border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 text-right"
                                required>
                            <input type="hidden" name="harga" id="harga" value="{{ old('harga', $barang->harga) }}">
                        </div>
                    </div>

                    <div>
                        <label for="stok" class="block text-gray-700 font-medium mb-2">Stok</label>
                        <input type="number" name="stok" id="stok"
                            value="{{ old('stok', $barang->stok) }}"
                            class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 text-right"
                            min="0" required>
                    </div>
                </div>

                <div class="mb-4">
                    <label for="gambar" class="block text-gray-700 font-medium mb-2">Gambar Produk</label>
                    @if($barang->gambar)
                    <div class="mb-2">
                        <img src="{{ Storage::url($barang->gambar) }}" alt="{{ $barang->nama_barang }}"
                            class="w-32 h-32 object-cover rounded">
                    </div>
                    @endif
                    <input type="file" name="gambar" id="gambar" accept="image/*"
                        class="w-full border border-gray-300 rounded-lg p-2">
                    <p class="text-sm text-gray-500 mt-1">Format: JPG, JPEG, PNG (Max. 2MB)</p>
                </div>

                <div class="flex justify-end gap-4">
                    <a href="{{ route('barang.index') }}"
                        class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded-lg">
                        Batal
                    </a>
                    <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg">
                        Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Format input harga
    const hargaDisplay = document.getElementById('harga_display');
    const hargaInput = document.getElementById('harga');

    function formatRupiah(angka) {
        let number_string = angka.toString().replace(/[^\d]/g, '');
        let split = number_string.split('');
        let sisa = split.length % 3;
        let rupiah = split.slice(0, sisa).join('');
        let ribuan = split.slice(sisa).join('').match(/\d{3}/g);
        
        if (ribuan) {
            let separator = sisa ? '.' : '';
            rupiah += separator + ribuan.join('.');
        }
        
        return rupiah;
    }

    function updateHarga(e) {
        let value = e.target.value.replace(/[^\d]/g, '');
        hargaDisplay.value = formatRupiah(value);
        hargaInput.value = value;
    }

    // Event listener untuk input
    hargaDisplay.addEventListener('input', updateHarga);
    hargaDisplay.addEventListener('focus', function(e) {
        let value = e.target.value.replace(/[^\d]/g, '');
        e.target.value = value;
    });
    hargaDisplay.addEventListener('blur', function(e) {
        let value = e.target.value.replace(/[^\d]/g, '');
        e.target.value = formatRupiah(value);
    });

    // Format nilai awal jika ada
    if (hargaDisplay.value) {
        let value = hargaDisplay.value.replace(/[^\d]/g, '');
        hargaDisplay.value = formatRupiah(value);
        hargaInput.value = value;
    }
</script>
@endpush