@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="mb-4">
        <h2>Tambah Pembelian Kayu Log</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.store') }}" method="POST">
        @csrf
        
        <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 Pembelian <span class="text-danger">*</span></label>
                        <input type="date" name="tanggal_pembelian" class="form-control @error('tanggal_pembelian') is-invalid @enderror" value="{{ old('tanggal_pembelian', date('Y-m-d')) }}" required>
                        @error('tanggal_pembelian')
                            <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') == $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" 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') == $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 Kendaraan <span class="text-danger">*</span></label>
                        <input type="text" name="no_kendaraan" class="form-control @error('no_kendaraan') is-invalid @enderror" value="{{ old('no_kendaraan') }}" required>
                        @error('no_kendaraan')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

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

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Tipe Pekerjaan</label>
                        <select name="tipe_pekerjaan" class="form-select @error('tipe_pekerjaan') is-invalid @enderror">
                            <option value="">Pilih Tipe Pekerjaan (Opsional)</option>
                            <option value="Bongkar" {{ old('tipe_pekerjaan') == 'Bongkar' ? 'selected' : '' }}>Bongkar</option>
                            <option value="Muat" {{ old('tipe_pekerjaan') == 'Muat' ? 'selected' : '' }}>Muat</option>
                            <option value="Bongkar+Muat" {{ old('tipe_pekerjaan') == 'Bongkar+Muat' ? 'selected' : '' }}>Bongkar+Muat</option>
                        </select>
                        @error('tipe_pekerjaan')
                            <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', [])) ? '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">Keterangan</label>
                        <textarea name="keterangan" class="form-control @error('keterangan') is-invalid @enderror" rows="2">{{ old('keterangan') }}</textarea>
                        @error('keterangan')
                            <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 Log</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">
                    <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" style="display:none;">
                            <i class="bi bi-x"></i>
                        </button>
                        <div class="row">
                            <div class="col-md-2 mb-2">
                                <label class="form-label">Kualitas <span class="text-danger">*</span></label>
                                <input type="text" name="items[0][kualitas]" class="form-control" placeholder="Super" required>
                            </div>
                            <div class="col-md-2 mb-2">
                                <label class="form-label">Panjang (cm) <span class="text-danger">*</span></label>
                                <input type="number" name="items[0][panjang]" class="form-control" placeholder="300" min="1" required>
                            </div>
                            <div class="col-md-2 mb-2">
                                <label class="form-label">Jenis Kayu <span class="text-danger">*</span></label>
                                <input type="text" name="items[0][jenis_kayu]" class="form-control" placeholder="A0" required>
                            </div>
                            <div class="col-md-2 mb-2">
                                <label class="form-label">Diameter (cm) <span class="text-danger">*</span></label>
                                <input type="number" name="items[0][diameter]" class="form-control item-calc" step="0.01" min="0" placeholder="25.5" required>
                            </div>
                            <div class="col-md-2 mb-2">
                                <label class="form-label">Pcs Log <span class="text-danger">*</span></label>
                                <input type="number" name="items[0][pcs_log]" class="form-control item-calc" min="1" placeholder="10" required>
                            </div>
                            <div class="col-md-2 mb-2">
                                <label class="form-label">Volume (m³) <span class="text-danger">*</span></label>
                                <input type="number" name="items[0][volume]" class="form-control item-volume" step="0.0001" min="0" placeholder="0.5000" required>
                                <small class="text-muted">Auto/Manual</small>
                            </div>
                            <div class="col-md-6 mb-2">
                                <label class="form-label">Harga <span class="text-danger">*</span></label>
                                <input type="number" name="items[0][harga]" class="form-control item-price" step="0.01" min="0" placeholder="500000" required>
                            </div>
                            <div class="col-md-6 mb-2">
                                <label class="form-label">Subtotal</label>
                                <input type="text" class="form-control bg-light item-subtotal" readonly>
                            </div>
                        </div>
                    </div>
                </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 Pcs:</strong>
                                    <span id="totalPcs">0 pcs</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <strong>Total Volume:</strong>
                                    <span id="totalVolume">0.0000 m³</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <strong>Total Rupiah:</strong>
                                    <span id="totalPrice">Rp 0</span>
                                </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">Simpan</button>
        </div>
    </form>
</div>

<script>
let itemIndex = 1;

document.getElementById('addItem').addEventListener('click', function() {
    const container = document.getElementById('itemsContainer');
    const newItem = document.querySelector('.item-row').cloneNode(true);
    
    newItem.querySelectorAll('input').forEach(input => {
        if (input.name) {
            input.name = input.name.replace('[0]', '[' + itemIndex + ']');
            input.value = '';
        }
    });
    
    newItem.querySelector('.remove-item').style.display = 'block';
    container.appendChild(newItem);
    itemIndex++;
    
    updateRemoveButtons();
    attachCalculationListeners();
});

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';
        }
    });
}

function calculateItem(itemRow) {
    const diameter = parseFloat(itemRow.querySelector('input[name*="[diameter]"]').value) || 0;
    const pcsLog = parseInt(itemRow.querySelector('input[name*="[pcs_log]"]').value) || 0;
    const volumeInput = itemRow.querySelector('input[name*="[volume]"]');
    const harga = parseFloat(itemRow.querySelector('input[name*="[harga]"]').value) || 0;
    
    // Auto-calculate volume if diameter and pcs are filled
    if (diameter > 0 && pcsLog > 0 && !volumeInput.value) {
        // Simple formula: π * r² * length (assuming 1m length per log as example)
        // You can adjust this formula based on your business logic
        const radius = diameter / 2 / 100; // convert cm to m
        const volumePerLog = Math.PI * radius * radius * 1; // assuming 1m length
        const totalVolume = volumePerLog * pcsLog;
        volumeInput.value = totalVolume.toFixed(4);
    }
    
    const volume = parseFloat(volumeInput.value) || 0;
    const subtotal = volume * harga;
    
    itemRow.querySelector('.item-subtotal').value = 'Rp ' + subtotal.toLocaleString('id-ID');
    
    calculateTotal();
}

function calculateTotal() {
    let totalPcs = 0;
    let totalVolume = 0;
    let totalPrice = 0;
    
    document.querySelectorAll('.item-row').forEach(row => {
        const pcs = parseInt(row.querySelector('input[name*="[pcs_log]"]').value) || 0;
        const volume = parseFloat(row.querySelector('input[name*="[volume]"]').value) || 0;
        const harga = parseFloat(row.querySelector('input[name*="[harga]"]').value) || 0;
        
        totalPcs += pcs;
        totalVolume += volume;
        totalPrice += volume * harga;
    });
    
    document.getElementById('totalPcs').textContent = totalPcs + ' pcs';
    document.getElementById('totalVolume').textContent = totalVolume.toFixed(4) + ' m³';
    document.getElementById('totalPrice').textContent = 'Rp ' + totalPrice.toLocaleString('id-ID');
}

function attachCalculationListeners() {
    document.querySelectorAll('.item-calc, .item-volume, .item-price').forEach(input => {
        input.removeEventListener('input', handleInput);
        input.addEventListener('input', handleInput);
    });
}

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

attachCalculationListeners();
updateRemoveButtons();
</script>
@endsection