@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">Tambah Barang Baru</h1>
            <p class="text-gray-600 mt-1">Isi form di bawah ini untuk menambahkan barang baru ke katalog</p>
        </div>
        <a href="{{ route('admin.barang.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors duration-200">
            <i class="fas fa-arrow-left mr-2"></i>Kembali
        </a>
    </div>

    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="p-6">
            @if($errors->any())
            <div class="mb-6 p-4 bg-red-50 border-l-4 border-red-500 text-red-700 rounded-lg">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-circle mr-2"></i>
                    <h3 class="font-medium">Terjadi kesalahan:</h3>
                </div>
                <ul class="mt-2 list-disc list-inside text-sm">
                    @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            <form action="{{ route('admin.barang.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                @csrf
                
                <!-- Informasi Dasar -->
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h2 class="text-lg font-medium text-gray-800 mb-4">Informasi Dasar</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-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') }}"
                                class="mt-1 focus:ring-[#2c7a7b] focus:border-[#2c7a7b] block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                                placeholder="Masukkan nama barang" 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') == 'Lampu' ? 'selected' : '' }}>Lampu</option>
                                <option value="Kipas" {{ old('kategori') == 'Kipas' ? 'selected' : '' }}>Kipas</option>
                                <option value="Kulkas" {{ old('kategori') == 'Kulkas' ? 'selected' : '' }}>Kulkas</option>
                                <option value="TV" {{ old('kategori') == 'TV' ? 'selected' : '' }}>TV</option>
                                <option value="Magic Com" {{ old('kategori') == 'Magic Com' ? 'selected' : '' }}>Magic Com</option>
                                <option value="Mesin Cuci" {{ old('kategori') == 'Mesin Cuci' ? 'selected' : '' }}>Mesin Cuci</option>
                                <option value="Kompor" {{ old('kategori') == 'Kompor' ? 'selected' : '' }}>Kompor</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Deskripsi -->
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h2 class="text-lg font-medium text-gray-800 mb-4">Deskripsi Produk</h2>
                    <div>
                        <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"
                            placeholder="Masukkan deskripsi produk">{{ old('deskripsi') }}</textarea>
                    </div>
                </div>

                <!-- Harga dan Stok -->
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h2 class="text-lg font-medium text-gray-800 mb-4">Harga dan Stok</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="harga" class="block text-sm font-medium text-gray-700 mb-1">Harga (Rp)</label>
                            <div class="relative">
                                <span class="absolute left-3 top-2 text-gray-500">Rp</span>
                                <input type="text" name="harga" id="harga_display" value="{{ old('harga') }}"
                                    class="mt-1 pl-9 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') }}"
                                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" min="0" required>
                        </div>
                    </div>
                </div>

                <!-- Gambar Produk -->
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h2 class="text-lg font-medium text-gray-800 mb-4">Gambar Produk</h2>
                    <div>
                        <label for="gambar" class="block text-sm font-medium text-gray-700 mb-1">Upload Gambar</label>
                        <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
                            <div class="space-y-1 text-center">
                                <i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i>
                                <div class="flex text-sm text-gray-600">
                                    <label for="gambar" class="relative cursor-pointer bg-white rounded-md font-medium text-[#2c7a7b] hover:text-[#246c6d] focus-within:outline-none">
                                        <span>Upload file</span>
                                        <input type="file" name="gambar" id="gambar" accept="image/*" class="sr-only">
                                    </label>
                                    <p class="pl-1">atau drag and drop</p>
                                </div>
                                <p class="text-xs text-gray-500">PNG, JPG, JPEG sampai 2MB</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tombol Submit -->
                <div class="flex justify-end space-x-3">
                    <a href="{{ route('admin.barang.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#2c7a7b]">
                        Batal
                    </a>
                    <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-[#2c7a7b] hover:bg-[#246c6d] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#2c7a7b]">
                        <i class="fas fa-save mr-2"></i>Simpan Barang
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://unpkg.com/imask"></script>
<script>
    // Preview gambar sebelum upload
    document.getElementById('gambar').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const preview = document.createElement('img');
                preview.src = e.target.result;
                preview.className = 'mx-auto h-32 w-32 object-cover rounded-lg';
                
                const container = document.querySelector('.border-dashed');
                container.innerHTML = '';
                container.appendChild(preview);
            }
            reader.readAsDataURL(file);
        }
    });

    // Format input harga
    const hargaDisplay = document.getElementById('harga_display');
    const form = document.querySelector('form');

    // Inisialisasi IMask untuk format rupiah
    const maskOptions = {
        mask: Number,
        scale: 0,
        thousandsSeparator: '.',
        normalizeZeros: false,
        padFractionalZeros: false,
        radix: '',
        min: 0
    };

    const mask = IMask(hargaDisplay, maskOptions);

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

    // Event listener untuk form submit
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        let value = mask.unmaskedValue;
        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
@endsection