@extends('layouts.admin')

@section('content')
@php
use Illuminate\Support\Facades\Storage;
@endphp
<div class="mb-6 flex items-center justify-between">
    <h1 class="text-2xl font-bold text-gray-800">Edit Barang</h1>
    <a href="{{ route('admin.barang.index') }}" class="text-[#2c7a7b] hover:text-[#246c6d]">
        <i class="fas fa-arrow-left mr-2"></i>Kembali
    </a>
</div>

<div class="bg-white rounded-lg shadow-sm p-6">
    @if($errors->any())
    <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded">
        <ul class="list-disc list-inside">
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form action="{{ route('admin.barang.update', $barang) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <label for="nama" class="block text-sm font-medium text-gray-700 mb-1">Nama Barang</label>
                <input type="text" name="nama" id="nama" value="{{ old('nama', $barang->nama_barang) }}"
                    class="mt-1 focus:ring-[#2c7a7b] focus:border-[#2c7a7b] block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                    required>
            </div>

            <div>
                <label for="kategori" class="block text-sm font-medium text-gray-700 mb-1">Kategori</label>
                <select name="kategori" id="kategori" class="mt-1 focus:ring-[#2c7a7b] focus:border-[#2c7a7b] block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" 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>

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

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <label for="harga" class="block text-sm font-medium text-gray-700 mb-1">Harga (Rp)</label>
                <div class="relative">
                    <input type="text" name="harga" id="harga_display" value="{{ old('harga', $barang->harga) }}"
                        class="mt-1 focus:ring-[#2c7a7b] focus:border-[#2c7a7b] block w-full shadow-sm sm:text-sm border-gray-300 rounded-md text-right"
                        placeholder="0" required>
                </div>
            </div>

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

        <div class="mb-6">
            <label for="gambar" class="block text-sm font-medium text-gray-700 mb-1">Gambar Produk</label>
            @if($barang->gambar)
            <div class="mb-2">
                <img src="{{ Storage::url($barang->gambar) }}" alt="{{ $barang->nama_barang }}" class="w-40 h-40 object-cover rounded">
                <p class="text-sm text-gray-500 mt-1">Gambar saat ini</p>
            </div>
            @endif
            <input type="file" name="gambar" id="gambar" accept="image/*"
                class="mt-1 focus:ring-[#2c7a7b] focus:border-[#2c7a7b] block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
            <p class="mt-1 text-sm text-gray-500">Format: JPG, JPEG, PNG (Max. 2MB). Kosongkan jika tidak ingin mengubah gambar.</p>
        </div>

        <div class="flex justify-end">
            <button type="submit" class="bg-[#2c7a7b] hover:bg-[#246c6d] text-white px-4 py-2 rounded-lg">
                <i class="fas fa-save mr-2"></i>Update
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/imask"></script>
<script>
    // Format input harga
    const hargaDisplay = document.getElementById('harga_display');
    const form = document.querySelector('form');

    // Fungsi untuk membersihkan nilai dari karakter non-digit
    function cleanNumber(value) {
        return String(value || '').replace(/[^0-9]/g, '');
    }

    // Bersihkan nilai awal input dari karakter non-digit
    hargaDisplay.value = cleanNumber(hargaDisplay.value);

    // Inisialisasi IMask untuk format rupiah
    const maskOptions = {
        mask: Number,
        scale: 0,
        thousandsSeparator: '.',
        signed: false,
        min: 0,
        autofix: true,
    };

    const mask = IMask(hargaDisplay, maskOptions);

    // Set nilai awal ke IMask agar diformat dengan benar
    mask.value = hargaDisplay.value;

    // Event listener untuk form submit
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        let value = mask.unmaskedValue;
        console.log('Unmasked value on submit:', value); // Debugging
        console.log('Display value on submit:', hargaDisplay.value); // Debugging

        if (value === '') {
            alert('Harga harus diisi');
            return false;
        }

        // Set nilai tanpa format ke input (penting untuk server-side validation)
        hargaDisplay.value = value;
        
        // Submit form
        this.submit();
    });
</script>
@endpush