@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="mb-4">
        <h2>Edit Pembelian Kayu</h2>
    </div>

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <form action="{{ route('purchases.update', $purchase) }}" method="POST">
        @csrf
        @method('PUT')
        
        <div class="card mb-3">
            <div class="card-header">
                <h5>Informasi Umum</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Tanggal Beli <span class="text-danger">*</span></label>
                        <input type="date" name="tanggal_beli" class="form-control @error('tanggal_beli') is-invalid @enderror" value="{{ old('tanggal_beli', $purchase->tanggal_beli) }}" required>
                        @error('tanggal_beli')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Supplier <span class="text-danger">*</span></label>
                        <select name="supplier_id" class="form-select @error('supplier_id') is-invalid @enderror" required>
                            <option value="">Pilih Supplier</option>
                            @foreach($suppliers as $supplier)
                                <option value="{{ $supplier->id }}" {{ old('supplier_id', $purchase->supplier_id) == $supplier->id ? 'selected' : '' }}>
                                    {{ $supplier->nama_supplier }}
                                </option>
                            @endforeach
                        </select>
                        @error('supplier_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4 mb-3">
                        <label class="form-label">Jenis Kendaraan <span class="text-danger">*</span></label>
                        <select name="vehicle_type_id" id="vehicle_type_id" class="form-select @error('vehicle_type_id') is-invalid @enderror" required>
                            <option value="">Pilih Kendaraan</option>
                            @foreach($vehicleTypes as $vehicle)
                                <option value="{{ $vehicle->id }}" {{ old('vehicle_type_id', $purchase->vehicle_type_id) == $vehicle->id ? 'selected' : '' }}>
                                    {{ $vehicle->nama_jenis_kendaraan }}
                                </option>
                            @endforeach
                        </select>
                        @error('vehicle_type_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4 mb-3">
                        <label class="form-label">No Polisi <span class="text-danger">*</span></label>
                        <input type="text" name="no_polisi" class="form-control @error('no_polisi') is-invalid @enderror" value="{{ old('no_polisi', $purchase->no_polisi) }}" required>
                        @error('no_polisi')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4 mb-3">
                        <label class="form-label">No DO</label>
                        <input type="text" name="no_do" class="form-control @error('no_do') is-invalid @enderror" value="{{ old('no_do', $purchase->no_do) }}">
                        @error('no_do')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Ongkos <span class="text-danger">*</span></label>
                        <select name="handling_cost_id" id="handling_cost_id" class="form-select mb-2">
                            <option value="">Pilih dari Master Ongkos (Opsional)</option>
                            @foreach($handlingCosts as $cost)
                                <option value="{{ $cost->id }}" data-cost="{{ $cost->biaya }}" data-vehicle="{{ $cost->vehicle_type_id }}" {{ old('handling_cost_id', $purchase->handling_cost_id) == $cost->id ? 'selected' : '' }}>
                                    {{ $cost->vehicleType->nama_jenis_kendaraan }} - Rp {{ number_format($cost->biaya, 0, ',', '.') }}
                                </option>
                            @endforeach
                        </select>
                        <input type="number" name="ongkos_total" id="ongkos_total" class="form-control @error('ongkos_total') is-invalid @enderror" value="{{ old('ongkos_total', $purchase->ongkos_total) }}" min="0" step="0.01" required>
                        @error('ongkos_total')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Pekerja (Pilih satu atau lebih)</label>
                        <select name="employees[]" class="form-select @error('employees') is-invalid @enderror" multiple size="5">
                            @foreach($employees as $employee)
                                <option value="{{ $employee->id }}" 
                                    {{ in_array($employee->id, old('employees', $purchase->workers->pluck('id')->toArray())) ? 'selected' : '' }}>
                                    {{ $employee->nama_karyawan }}
                                </option>
                            @endforeach
                        </select>
                        <small class="text-muted">Tekan Ctrl/Cmd untuk pilih lebih dari satu</small>
                        @error('employees')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12 mb-3">
                        <label class="form-label">Catatan</label>
                        <textarea name="catatan" class="form-control @error('catatan') is-invalid @enderror" rows="2">{{ old('catatan', $purchase->catatan) }}</textarea>
                        @error('catatan')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5>Item Kayu</h5>
                <button type="button" class="btn btn-sm btn-success" id="addItem">
                    <i class="bi bi-plus"></i> Tambah Item
                </button>
            </div>
            <div class="card-body">
                <div id="itemsContainer">
                    @foreach($purchase->items as $index => $item)
                    <div class="item-row border p-3 mb-3 rounded position-relative">
                        <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-2 remove-item">
                            <i class="bi bi-x"></i>
                        </button>
                        <div class="row">
                            <div class="col-md-3 mb-2">
                                <label class="form-label">Jenis Kayu <span class="text-danger">*</span></label>
                                <input type="text" name="items[{{ $index }}][jenis_kayu]" class="form-control" value="{{ $item->jenis_kayu }}" required>
                            </div>
                            <div class="col-md-2 mb-2">
                                <label class="form-label">Panjang (m) <span class="text-danger">*</span></label>
                                <input type="number" name="items[{{ $index }}][panjang]" class="form-control item-dimension" step="0.01" min="0" value="{{ $item->panjang }}" required>
                            </div>
                            <div class="col-md-2 mb-2">
                                <label class="form-label">Lebar (m) <span class="text-danger">*</span></label>
                                <input type="number" name="items[{{ $index }}][lebar]" class="form-control item-dimension" step="0.01" min="0" value="{{ $item->lebar }}" required>
                            </div>
                            <div class="col-md-2 mb-2">
                                <label class="form-label">Tinggi (m) <span class="text-danger">*</span></label>
                                <input type="number" name="items[{{ $index }}][tinggi]" class="form-control item-dimension" step="0.01" min="0" value="{{ $item->tinggi }}" required>
                            </div>
                            <div class="col-md-3 mb-2">
                                <label class="form-label">Jumlah Batang <span class="text-danger">*</span></label>
                                <input type="number" name="items[{{ $index }}][jumlah_batang]" class="form-control item-dimension" min="1" value="{{ $item->jumlah_batang }}" required>
                            </div>
                            <div class="col-md-4 mb-2">
                                <label class="form-label">Harga per m³ <span class="text-danger">*</span></label>
                                <input type="number" name="items[{{ $index }}][harga_per_m3]" class="form-control item-price" step="0.01" min="0" value="{{ $item->harga_per_m3 }}" required>
                            </div>
                            <div class="col-md-4 mb-2">
                                <label class="form-label">Volume (m³)</label>
                                <input type="text" class="form-control bg-light item-volume" readonly>
                            </div>
                            <div class="col-md-4 mb-2">
                                <label class="form-label">Subtotal</label>
                                <input type="text" class="form-control bg-light item-subtotal" readonly>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                
                <div class="row mt-3">
                    <div class="col-md-6 offset-md-6">
                        <div class="card bg-light">
                            <div class="card-body">
                                <div class="d-flex justify-content-between mb-2">
                                    <strong>Total Volume:</strong>
                                    <span id="totalVolume">0.000 m³</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <strong>Total Harga Kayu:</strong>
                                    <span id="totalPrice">Rp 0</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <strong>Ongkos:</strong>
                                    <span id="displayOngkos">Rp 0</span>
                                </div>
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <strong class="text-primary">Grand Total:</strong>
                                    <strong class="text-primary" id="grandTotal">Rp 0</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-end gap-2">
            <a href="{{ route('purchases.index') }}" class="btn btn-secondary">Batal</a>
            <button type="submit" class="btn btn-primary">Update</button>
        </div>
    </form>
</div>

<script>
let itemIndex = {{ $purchase->items->count() }};

// Add new item
document.getElementById('addItem').addEventListener('click', function() {
    const container = document.getElementById('itemsContainer');
    const newItem = document.querySelector('.item-row').cloneNode(true);
    
    // Update name attributes
    newItem.querySelectorAll('input').forEach(input => {
        if (input.name) {
            const match = input.name.match(/\[(\d+)\]/);
            if (match) {
                input.name = input.name.replace('[' + match[1] + ']', '[' + itemIndex + ']');
            }
            if (!input.classList.contains('item-volume') && !input.classList.contains('item-subtotal')) {
                input.value = '';
            }
        }
    });
    
    // Show remove button
    newItem.querySelector('.remove-item').style.display = 'block';
    
    container.appendChild(newItem);
    itemIndex++;
    
    updateRemoveButtons();
    attachCalculationListeners();
});

// Remove item
function updateRemoveButtons() {
    const items = document.querySelectorAll('.item-row');
    items.forEach((item, index) => {
        const removeBtn = item.querySelector('.remove-item');
        if (items.length > 1) {
            removeBtn.style.display = 'block';
            removeBtn.onclick = function() {
                item.remove();
                calculateTotal();
                updateRemoveButtons();
            };
        } else {
            removeBtn.style.display = 'none';
        }
    });
}

// Calculate item volume and subtotal
function calculateItem(itemRow) {
    const panjang = parseFloat(itemRow.querySelector('input[name*="[panjang]"]').value) || 0;
    const lebar = parseFloat(itemRow.querySelector('input[name*="[lebar]"]').value) || 0;
    const tinggi = parseFloat(itemRow.querySelector('input[name*="[tinggi]"]').value) || 0;
    const jumlah = parseInt(itemRow.querySelector('input[name*="[jumlah_batang]"]').value) || 0;
    const harga = parseFloat(itemRow.querySelector('input[name*="[harga_per_m3]"]').value) || 0;
    
    const volume = panjang * lebar * tinggi * jumlah;
    const subtotal = volume * harga;
    
    itemRow.querySelector('.item-volume').value = volume.toFixed(3) + ' m³';
    itemRow.querySelector('.item-subtotal').value = 'Rp ' + subtotal.toLocaleString('id-ID');
    
    calculateTotal();
}

// Calculate grand total
function calculateTotal() {
    let totalVolume = 0;
    let totalPrice = 0;
    
    document.querySelectorAll('.item-row').forEach(row => {
        const panjang = parseFloat(row.querySelector('input[name*="[panjang]"]').value) || 0;
        const lebar = parseFloat(row.querySelector('input[name*="[lebar]"]').value) || 0;
        const tinggi = parseFloat(row.querySelector('input[name*="[tinggi]"]').value) || 0;
        const jumlah = parseInt(row.querySelector('input[name*="[jumlah_batang]"]').value) || 0;
        const harga = parseFloat(row.querySelector('input[name*="[harga_per_m3]"]').value) || 0;
        
        totalVolume += panjang * lebar * tinggi * jumlah;
        totalPrice += (panjang * lebar * tinggi * jumlah) * harga;
    });
    
    const ongkos = parseFloat(document.getElementById('ongkos_total').value) || 0;
    const grandTotal = totalPrice + ongkos;
    
    document.getElementById('totalVolume').textContent = totalVolume.toFixed(3) + ' m³';
    document.getElementById('totalPrice').textContent = 'Rp ' + totalPrice.toLocaleString('id-ID');
    document.getElementById('displayOngkos').textContent = 'Rp ' + ongkos.toLocaleString('id-ID');
    document.getElementById('grandTotal').textContent = 'Rp ' + grandTotal.toLocaleString('id-ID');
}

// Attach calculation listeners
function attachCalculationListeners() {
    document.querySelectorAll('.item-dimension, .item-price').forEach(input => {
        input.removeEventListener('input', handleInput);
        input.addEventListener('input', handleInput);
    });
}

function handleInput(e) {
    const itemRow = e.target.closest('.item-row');
    calculateItem(itemRow);
}

// Auto-fill ongkos from handling cost
document.getElementById('handling_cost_id').addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    if (selectedOption.value) {
        const cost = selectedOption.getAttribute('data-cost');
        document.getElementById('ongkos_total').value = cost;
    }
    calculateTotal();
});

// Update ongkos display when changed manually
document.getElementById('ongkos_total').addEventListener('input', calculateTotal);

// Initialize
attachCalculationListeners();
updateRemoveButtons();
// Calculate on load
document.querySelectorAll('.item-row').forEach(row => calculateItem(row));
</script>
@endsection