@extends('layouts.app')

@section('title', 'Tambah Produk')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">
                <i class="fas fa-plus-circle text-primary me-2"></i>
                Tambah Produk Baru
            </h1>
            <p class="text-muted small mb-0">Menambahkan produk baru ke dalam sistem</p>
        </div>
        <div>
            <a href="{{ route('produks.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-1"></i>
                Kembali
            </a>
        </div>
    </div>

    <!-- Form Card -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-edit me-2"></i>Form Produk Baru
            </h6>
        </div>
        <div class="card-body">
            <form action="{{ route('produks.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                <div class="row">
                    <!-- Left Column -->
                    <div class="col-md-6">
                        <!-- Informasi Dasar -->
                        <div class="mb-4">
                            <h6 class="text-primary border-bottom pb-2 mb-3">
                                <i class="fas fa-info-circle me-2"></i>Informasi Dasar
                            </h6>
                            
                            <div class="mb-3">
                                <label for="nama_produk" class="form-label">Nama Produk <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('nama_produk') is-invalid @enderror" 
                                       id="nama_produk" name="nama_produk" value="{{ old('nama_produk') }}" 
                                       placeholder="Contoh: Router TP-Link AC1200" required>
                                @error('nama_produk')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="kode_produk" class="form-label">Kode Produk</label>
                                <input type="text" class="form-control @error('kode_produk') is-invalid @enderror" 
                                       id="kode_produk" name="kode_produk" value="{{ old('kode_produk') }}" 
                                       placeholder="Kosongkan untuk auto generate">
                                @error('kode_produk')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Biarkan kosong untuk generate otomatis</div>
                            </div>

                            <div class="mb-3">
                                <label for="deskripsi" class="form-label">Deskripsi</label>
                                <textarea class="form-control @error('deskripsi') is-invalid @enderror" 
                                          id="deskripsi" name="deskripsi" rows="3" 
                                          placeholder="Deskripsi produk...">{{ old('deskripsi') }}</textarea>
                                @error('deskripsi')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Kategori & Tipe -->
                        <div class="mb-4">
                            <h6 class="text-primary border-bottom pb-2 mb-3">
                                <i class="fas fa-tags me-2"></i>Kategori & Tipe
                            </h6>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="kategori" class="form-label">Kategori</label>
                                        <input type="text" class="form-control @error('kategori') is-invalid @enderror" 
                                               id="kategori" name="kategori" value="{{ old('kategori') }}" 
                                               placeholder="Contoh: Router" list="kategori_list">
                                        <datalist id="kategori_list">
                                            @foreach($kategoris as $kategori)
                                                <option value="{{ $kategori }}">
                                            @endforeach
                                        </datalist>
                                        @error('kategori')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="merk" class="form-label">Merk</label>
                                        <input type="text" class="form-control @error('merk') is-invalid @enderror" 
                                               id="merk" name="merk" value="{{ old('merk') }}" 
                                               placeholder="Contoh: TP-Link">
                                        @error('merk')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="tipe" class="form-label">Tipe/Model</label>
                                <input type="text" class="form-control @error('tipe') is-invalid @enderror" 
                                       id="tipe" name="tipe" value="{{ old('tipe') }}" 
                                       placeholder="Contoh: AC1200">
                                @error('tipe')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Right Column -->
                    <div class="col-md-6">
                        <!-- Harga & Stok -->
                        <div class="mb-4">
                            <h6 class="text-primary border-bottom pb-2 mb-3">
                                <i class="fas fa-calculator me-2"></i>Harga & Stok
                            </h6>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="harga_beli" class="form-label">Harga Beli <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <span class="input-group-text">Rp</span>
                                            <input type="number" class="form-control @error('harga_beli') is-invalid @enderror" 
                                                   id="harga_beli" name="harga_beli" value="{{ old('harga_beli') }}" 
                                                   placeholder="0" min="0" step="1" required>
                                        </div>
                                        @error('harga_beli')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="harga_jual" class="form-label">Harga Jual <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <span class="input-group-text">Rp</span>
                                            <input type="number" class="form-control @error('harga_jual') is-invalid @enderror" 
                                                   id="harga_jual" name="harga_jual" value="{{ old('harga_jual') }}" 
                                                   placeholder="0" min="0" step="1" required>
                                        </div>
                                        @error('harga_jual')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="stok" class="form-label">Stok Awal <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control @error('stok') is-invalid @enderror" 
                                               id="stok" name="stok" value="{{ old('stok', 0) }}" 
                                               placeholder="0" min="0" required>
                                        @error('stok')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="stok_minimum" class="form-label">Stok Minimum <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control @error('stok_minimum') is-invalid @enderror" 
                                               id="stok_minimum" name="stok_minimum" value="{{ old('stok_minimum', 5) }}" 
                                               placeholder="5" min="0" required>
                                        @error('stok_minimum')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="unit" class="form-label">Unit <span class="text-danger">*</span></label>
                                        <select class="form-select @error('unit') is-invalid @enderror" 
                                                id="unit" name="unit" required>
                                            <option value="pcs" {{ old('unit') == 'pcs' ? 'selected' : '' }}>Pcs</option>
                                            <option value="unit" {{ old('unit') == 'unit' ? 'selected' : '' }}>Unit</option>
                                            <option value="box" {{ old('unit') == 'box' ? 'selected' : '' }}>Box</option>
                                            <option value="meter" {{ old('unit') == 'meter' ? 'selected' : '' }}>Meter</option>
                                            <option value="kg" {{ old('unit') == 'kg' ? 'selected' : '' }}>Kg</option>
                                            <option value="roll" {{ old('unit') == 'roll' ? 'selected' : '' }}>Roll</option>
                                        </select>
                                        @error('unit')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Upload Foto -->
                        <div class="mb-4">
                            <h6 class="text-primary border-bottom pb-2 mb-3">
                                <i class="fas fa-camera me-2"></i>Foto Produk
                            </h6>
                            
                            <div class="mb-3">
                                <label for="foto_produk" class="form-label">Upload Foto</label>
                                <input type="file" class="form-control @error('foto_produk') is-invalid @enderror" 
                                       id="foto_produk" name="foto_produk" accept="image/*">
                                @error('foto_produk')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Format: JPEG, PNG, JPG, GIF. Maksimal 2MB</div>
                            </div>

                            <!-- Preview foto -->
                            <div id="foto_preview" class="mt-2" style="display: none;">
                                <img id="preview_image" src="" class="img-thumbnail" style="max-width: 200px; max-height: 200px;">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Additional Info -->
                <div class="row">
                    <div class="col-12">
                        <div class="mb-4">
                            <h6 class="text-primary border-bottom pb-2 mb-3">
                                <i class="fas fa-info me-2"></i>Informasi Tambahan
                            </h6>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="supplier" class="form-label">Supplier</label>
                                        <input type="text" class="form-control @error('supplier') is-invalid @enderror" 
                                               id="supplier" name="supplier" value="{{ old('supplier') }}" 
                                               placeholder="Nama supplier">
                                        @error('supplier')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                                        <select class="form-select @error('status') is-invalid @enderror" 
                                                id="status" name="status" required>
                                            <option value="aktif" {{ old('status') == 'aktif' ? 'selected' : '' }}>Aktif</option>
                                            <option value="nonaktif" {{ old('status') == 'nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                        </select>
                                        @error('status')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="spesifikasi" class="form-label">Spesifikasi</label>
                                <textarea class="form-control @error('spesifikasi') is-invalid @enderror" 
                                          id="spesifikasi" name="spesifikasi" rows="3" 
                                          placeholder="Spesifikasi detail produk...">{{ old('spesifikasi') }}</textarea>
                                @error('spesifikasi')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="keterangan" class="form-label">Keterangan</label>
                                <textarea class="form-control @error('keterangan') is-invalid @enderror" 
                                          id="keterangan" name="keterangan" rows="2" 
                                          placeholder="Keterangan tambahan...">{{ old('keterangan') }}</textarea>
                                @error('keterangan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('produks.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-1"></i>
                                Batal
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>
                                Simpan Produk
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    // Preview foto
    $('#foto_produk').change(function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#preview_image').attr('src', e.target.result);
                $('#foto_preview').show();
            }
            reader.readAsDataURL(file);
        } else {
            $('#foto_preview').hide();
        }
    });

    // Auto calculate profit margin
    $('#harga_beli, #harga_jual').on('input', function() {
        const hargaBeli = parseFloat($('#harga_beli').val()) || 0;
        const hargaJual = parseFloat($('#harga_jual').val()) || 0;
        
        if (hargaBeli > 0 && hargaJual > 0) {
            const profit = hargaJual - hargaBeli;
            const margin = ((profit / hargaBeli) * 100).toFixed(2);
            
            // Show profit info
            if (!$('#profit_info').length) {
                $('<div id="profit_info" class="alert alert-info mt-2"></div>')
                    .insertAfter('#harga_jual').parent();
            }
            
            $('#profit_info').html(`
                <small>
                    <i class="fas fa-calculator me-1"></i>
                    Profit: Rp ${profit.toLocaleString('id-ID')} (${margin}%)
                </small>
            `);
        } else {
            $('#profit_info').remove();
        }
    });

    // Format currency input
    $('#harga_beli, #harga_jual').on('blur', function() {
        const value = parseFloat(this.value) || 0;
        this.value = Math.round(value);
    });

    // Validate stok minimum <= stok awal
    $('#stok, #stok_minimum').on('input', function() {
        const stok = parseInt($('#stok').val()) || 0;
        const stokMin = parseInt($('#stok_minimum').val()) || 0;
        
        if (stokMin > stok) {
            $('#stok_minimum')[0].setCustomValidity('Stok minimum tidak boleh lebih besar dari stok awal');
        } else {
            $('#stok_minimum')[0].setCustomValidity('');
        }
    });
});
</script>
@endpush
@endsection