@extends('layouts.app')

@section('title', 'Transaksi Pembelian Baru')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="corporate-header">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h1 class="h3 mb-0 text-gray-800">
                            <i class="fas fa-plus text-primary me-2"></i>
                            Transaksi Pembelian Baru
                        </h1>
                        <p class="text-muted small mb-0">Buat transaksi pembelian produk dan layanan</p>
                    </div>
                    <div class="col-md-4 text-end">
                        <a href="{{ route('pembelians.index') }}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-arrow-left me-1"></i>
                            Kembali
                        </a>
                    </div>
                </div>
            </div>

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

            <form method="POST" action="{{ route('pembelians.store') }}" id="pembelianForm">
                @csrf
                
                <div class="row">
                    <!-- Form Data Transaksi -->
                    <div class="col-lg-8">
                        <!-- Informasi Pembeli -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="card-title mb-0">
                                    <i class="fas fa-user me-2"></i>
                                    Informasi Pembeli
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Tipe Pembeli</label>
                                            <select class="form-select" name="tipe_pembeli" id="tipePembeli" required>
                                                <option value="">Pilih Tipe Pembeli</option>
                                                <option value="pelanggan" {{ old('tipe_pembeli') == 'pelanggan' ? 'selected' : '' }}>Pelanggan Terdaftar</option>
                                                <option value="umum" {{ old('tipe_pembeli') == 'umum' ? 'selected' : '' }}>Pembeli Umum</option>
                                            </select>
                                            @error('tipe_pembeli')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Tanggal Pembelian</label>
                                            <input type="date" class="form-control" name="tanggal_pembelian" 
                                                   value="{{ old('tanggal_pembelian', date('Y-m-d')) }}" required>
                                            @error('tanggal_pembelian')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <!-- Pelanggan Terdaftar -->
                                <div id="pelangganSection" style="display: none;">
                                    <div class="mb-3">
                                        <label class="form-label">Pilih Pelanggan</label>
                                        <select class="form-select" name="pelanggan_id" id="pelangganSelect">
                                            <option value="">-- Pilih Pelanggan --</option>
                                            @foreach($pelanggans as $pelanggan)
                                                <option value="{{ $pelanggan->id }}" 
                                                        data-nama="{{ $pelanggan->nama_lengkap }}"
                                                        data-hp="{{ $pelanggan->nomor_hp }}"
                                                        data-alamat="{{ $pelanggan->alamat }}"
                                                        {{ old('pelanggan_id') == $pelanggan->id ? 'selected' : '' }}>
                                                    {{ $pelanggan->nama_lengkap }} - {{ $pelanggan->nomor_hp }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <!-- Pembeli Umum -->
                                <div id="umumSection" style="display: none;">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label">Nama Pembeli</label>
                                                <input type="text" class="form-control" name="nama_pembeli" 
                                                       value="{{ old('nama_pembeli') }}" placeholder="Nama lengkap pembeli">
                                                @error('nama_pembeli')
                                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label">Nomor HP</label>
                                                <input type="text" class="form-control" name="nomor_hp" 
                                                       value="{{ old('nomor_hp') }}" placeholder="08xxxxxxxxxx">
                                                @error('nomor_hp')
                                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Alamat</label>
                                        <textarea class="form-control" name="alamat" rows="2" 
                                                  placeholder="Alamat lengkap pembeli">{{ old('alamat') }}</textarea>
                                        @error('alamat')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Item Pembelian -->
                        <div class="card mb-3">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h6 class="card-title mb-0">
                                    <i class="fas fa-shopping-basket me-2"></i>
                                    Item Pembelian
                                </h6>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-sm btn-primary" onclick="addProdukItem()">
                                        <i class="fas fa-box me-1"></i>Tambah Produk
                                    </button>
                                    <button type="button" class="btn btn-sm btn-success" onclick="addLayananItem()">
                                        <i class="fas fa-tools me-1"></i>Tambah Layanan
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div id="itemsContainer">
                                    <!-- Items akan ditambahkan di sini secara dinamis -->
                                </div>
                                
                                <div id="emptyState" class="text-center py-4">
                                    <i class="fas fa-shopping-basket fa-3x text-muted mb-3"></i>
                                    <h6 class="text-muted">Belum ada item</h6>
                                    <p class="text-muted small">Klik tombol "Tambah Produk" atau "Tambah Layanan" untuk menambahkan item</p>
                                </div>
                            </div>
                        </div>

                        <!-- Catatan -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="card-title mb-0">
                                    <i class="fas fa-sticky-note me-2"></i>
                                    Catatan Transaksi
                                </h6>
                            </div>
                            <div class="card-body">
                                <textarea class="form-control" name="catatan" rows="3" 
                                          placeholder="Catatan tambahan untuk transaksi ini...">{{ old('catatan') }}</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Ringkasan Transaksi -->
                    <div class="col-lg-4">
                        <div class="card sticky-top" style="top: 20px;">
                            <div class="card-header">
                                <h6 class="card-title mb-0">
                                    <i class="fas fa-calculator me-2"></i>
                                    Ringkasan Transaksi
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between">
                                        <span>Subtotal:</span>
                                        <span id="subtotalDisplay">Rp 0</span>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Diskon (%)</label>
                                    <input type="number" class="form-control" name="diskon_persen" 
                                           id="diskonPersen" value="{{ old('diskon_persen', 0) }}" 
                                           min="0" max="100" step="0.01">
                                    <div class="d-flex justify-content-between mt-1">
                                        <small class="text-muted">Diskon Amount:</small>
                                        <small id="diskonAmountDisplay" class="text-muted">Rp 0</small>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">PPN (%)</label>
                                    <input type="number" class="form-control" name="ppn_persen" 
                                           id="ppnPersen" value="{{ old('ppn_persen', 0) }}" 
                                           min="0" max="100" step="0.01">
                                    <div class="d-flex justify-content-between mt-1">
                                        <small class="text-muted">PPN Amount:</small>
                                        <small id="ppnAmountDisplay" class="text-muted">Rp 0</small>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Biaya Lain-lain</label>
                                    <input type="number" class="form-control" name="biaya_lain" 
                                           id="biayaLain" value="{{ old('biaya_lain', 0) }}" 
                                           min="0" step="0.01">
                                    <input type="text" class="form-control form-control-sm mt-1" 
                                           name="keterangan_biaya_lain" 
                                           placeholder="Keterangan biaya lain..." 
                                           value="{{ old('keterangan_biaya_lain') }}">
                                </div>

                                <hr>

                                <div class="mb-3">
                                    <div class="d-flex justify-content-between">
                                        <strong>Total Bayar:</strong>
                                        <strong id="totalDisplay" class="text-primary">Rp 0</strong>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Status Pembayaran</label>
                                    <select class="form-select" name="status_pembayaran" required>
                                        <option value="belum_bayar" {{ old('status_pembayaran') == 'belum_bayar' ? 'selected' : '' }}>Belum Bayar</option>
                                        <option value="lunas" {{ old('status_pembayaran') == 'lunas' ? 'selected' : '' }}>Lunas</option>
                                        <option value="cicilan" {{ old('status_pembayaran') == 'cicilan' ? 'selected' : '' }}>Cicilan</option>
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Metode Pembayaran</label>
                                    <select class="form-select" name="metode_pembayaran" required>
                                        <option value="tunai" {{ old('metode_pembayaran') == 'tunai' ? 'selected' : '' }}>Tunai</option>
                                        <option value="transfer" {{ old('metode_pembayaran') == 'transfer' ? 'selected' : '' }}>Transfer</option>
                                        <option value="kartu_kredit" {{ old('metode_pembayaran') == 'kartu_kredit' ? 'selected' : '' }}>Kartu Kredit</option>
                                        <option value="cicilan" {{ old('metode_pembayaran') == 'cicilan' ? 'selected' : '' }}>Cicilan</option>
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Template Invoice</label>
                                    <select class="form-select" name="template_invoice_id">
                                        <option value="">Pilih Template (Opsional)</option>
                                        @foreach($templates as $template)
                                            <option value="{{ $template->id }}" {{ old('template_invoice_id') == $template->id ? 'selected' : '' }}>
                                                {{ $template->nama_template }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <button type="submit" class="btn btn-primary w-100" id="submitBtn">
                                    <i class="fas fa-save me-1"></i>
                                    Simpan Transaksi
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Pilih Produk -->
<div class="modal fade" id="pilihProdukModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Pilih Produk</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" class="form-control" id="searchProduk" placeholder="Cari produk...">
                </div>
                <div id="produkList" class="list-group" style="max-height: 400px; overflow-y: auto;">
                    <!-- Produk list akan dimuat di sini -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Pilih Layanan -->
<div class="modal fade" id="pilihLayananModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Pilih Layanan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <select class="form-select" id="layananType">
                            <option value="">Pilih Tipe Layanan</option>
                            <option value="jasa">Jasa</option>
                            <option value="pppoe">Internet Rumahan (PPPoE)</option>
                            <option value="hotspot">Internet Hotspot</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <input type="text" class="form-control" id="searchLayanan" placeholder="Cari layanan...">
                    </div>
                </div>
                <div id="layananList" class="list-group" style="max-height: 400px; overflow-y: auto;">
                    <!-- Layanan list akan dimuat di sini -->
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let itemIndex = 0;

$(document).ready(function() {
    // Inisialisasi
    initializeForm();
    loadProdukList();
    
    // Event handlers
    $('#tipePembeli').change(function() {
        handleTipePembeliChange();
    });
    
    $('#pelangganSelect').change(function() {
        handlePelangganChange();
    });
    
    // Kalkulasi otomatis
    $(document).on('input', '#diskonPersen, #ppnPersen, #biayaLain', function() {
        calculateTotal();
    });
    
    // Search produk
    $('#searchProduk').on('input', function() {
        loadProdukList($(this).val());
    });
    
    // Search layanan
    $('#searchLayanan').on('input', function() {
        const type = $('#layananType').val();
        if (type) {
            loadLayananList(type, $(this).val());
        }
    });
    
    $('#layananType').change(function() {
        const type = $(this).val();
        if (type) {
            loadLayananList(type);
        } else {
            $('#layananList').empty();
        }
    });
});

function initializeForm() {
    const tipePembeli = $('#tipePembeli').val();
    if (tipePembeli) {
        handleTipePembeliChange();
    }
}

function handleTipePembeliChange() {
    const tipe = $('#tipePembeli').val();
    
    if (tipe === 'pelanggan') {
        $('#pelangganSection').show();
        $('#umumSection').hide();
        // Reset form umum
        $('#umumSection input, #umumSection textarea').val('');
    } else if (tipe === 'umum') {
        $('#pelangganSection').hide();
        $('#umumSection').show();
        // Reset pelanggan
        $('#pelangganSelect').val('');
    } else {
        $('#pelangganSection').hide();
        $('#umumSection').hide();
    }
}

function handlePelangganChange() {
    const selected = $('#pelangganSelect option:selected');
    // Data pelanggan akan otomatis terisi
}

function addProdukItem() {
    $('#pilihProdukModal').modal('show');
    loadProdukList();
}

function addLayananItem() {
    $('#pilihLayananModal').modal('show');
    $('#layananType').val('');
    $('#layananList').empty();
}

function loadProdukList(search = '') {
    $.get('/api/produks/search', { search: search })
        .done(function(response) {
            let html = '';
            // Response sekarang memiliki struktur {success: true, data: [...]}
            if (response.success && response.data && response.data.length > 0) {
                response.data.forEach(function(produk) {
                    html += `
                        <a href="#" class="list-group-item list-group-item-action" onclick="selectProduk(${produk.id}, '${produk.nama_produk}', ${produk.harga_jual}, '${produk.unit}')">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">${produk.nama_produk}</h6>
                                    <p class="mb-1 text-muted small">${produk.kategori || produk.kode_produk || 'Tidak ada kategori'}</p>
                                    <small class="text-muted">Stok: ${produk.stok} ${produk.unit}</small>
                                </div>
                                <div class="text-end">
                                    <span class="badge bg-primary">Rp ${formatNumber(produk.harga_jual)}</span>
                                </div>
                            </div>
                        </a>
                    `;
                });
            } else {
                html = '<div class="text-center py-3 text-muted">Tidak ada produk ditemukan</div>';
            }
            $('#produkList').html(html);
        })
        .fail(function(xhr, status, error) {
            console.error('Error loading products:', error);
            $('#produkList').html('<div class="text-center py-3 text-danger">Gagal memuat data produk</div>');
        });
}

function loadLayananList(type, search = '') {
    $.get('/api/pembelians/layanan-data', { type: type, search: search })
        .done(function(response) {
            let html = '';
            // Check if response has data property or is direct array
            let layananData = response.data || response;
            
            if (layananData && layananData.length > 0) {
                layananData.forEach(function(layanan) {
                    html += `
                        <a href="#" class="list-group-item list-group-item-action" onclick="selectLayanan('${type}', ${layanan.id}, '${layanan.nama}', ${layanan.harga}, '${layanan.unit || 'layanan'}')">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">${layanan.nama}</h6>
                                    <p class="mb-1 text-muted small">${layanan.deskripsi || 'Tidak ada deskripsi'}</p>
                                </div>
                                <div class="text-end">
                                    <span class="badge bg-success">Rp ${formatNumber(layanan.harga)}</span>
                                </div>
                            </div>
                        </a>
                    `;
                });
            } else {
                html = '<div class="text-center py-3 text-muted">Tidak ada layanan ditemukan</div>';
            }
            $('#layananList').html(html);
        })
        .fail(function(xhr, status, error) {
            console.error('Error loading services:', error);
            $('#layananList').html('<div class="text-center py-3 text-danger">Gagal memuat data layanan</div>');
        });
}

function selectProduk(id, nama, harga, unit) {
    addItemToForm('produk', id, nama, harga, unit);
    $('#pilihProdukModal').modal('hide');
}

function selectLayanan(type, id, nama, harga, unit) {
    let itemType;
    switch(type) {
        case 'jasa':
            itemType = 'layanan_jasa';
            break;
        case 'pppoe':
            itemType = 'layanan_pppoe';
            break;
        case 'hotspot':
            itemType = 'layanan_hotspot';
            break;
        default:
            itemType = type;
    }
    
    addItemToForm(itemType, id, nama, harga, unit);
    $('#pilihLayananModal').modal('hide');
}

function addItemToForm(type, id, nama, harga, unit) {
    const index = itemIndex++;
    
    let html = `
        <div class="item-row mb-3 p-3 border rounded" data-index="${index}">
            <div class="row align-items-center">
                <div class="col-md-4">
                    <h6 class="mb-1">${nama}</h6>
                    <small class="text-muted">${getTypeLabel(type)}</small>
                    <input type="hidden" name="items[${index}][item_type]" value="${type}">
                    <input type="hidden" name="items[${index}][item_id]" value="${id}">
                    <input type="hidden" name="items[${index}][nama_item]" value="${nama}">
                    <input type="hidden" name="items[${index}][harga_satuan]" value="${harga}">
                </div>
                <div class="col-md-2">
                    <label class="form-label small">Quantity</label>
                    <input type="number" class="form-control form-control-sm item-quantity" 
                           name="items[${index}][quantity]" value="1" min="1" data-index="${index}">
                </div>
                <div class="col-md-2">
                    <label class="form-label small">Harga</label>
                    <input type="text" class="form-control form-control-sm" 
                           value="Rp ${formatNumber(harga)}" readonly>
                </div>
                <div class="col-md-2">
                    <label class="form-label small">Diskon (%)</label>
                    <input type="number" class="form-control form-control-sm item-discount" 
                           name="items[${index}][diskon_item_persen]" value="0" min="0" max="100" step="0.01" data-index="${index}">
                </div>
                <div class="col-md-1">
                    <label class="form-label small">Subtotal</label>
                    <div class="item-subtotal fw-bold" data-index="${index}">Rp ${formatNumber(harga)}</div>
                </div>
                <div class="col-md-1">
                    <label class="form-label small">&nbsp;</label>
                    <button type="button" class="btn btn-sm btn-outline-danger w-100" onclick="removeItem(${index})">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        </div>
    `;
    
    $('#itemsContainer').append(html);
    $('#emptyState').hide();
    
    // Update total
    calculateTotal();
}

function removeItem(index) {
    $(`.item-row[data-index="${index}"]`).remove();
    
    if ($('#itemsContainer .item-row').length === 0) {
        $('#emptyState').show();
    }
    
    calculateTotal();
}

$(document).on('input', '.item-quantity, .item-discount', function() {
    const index = $(this).data('index');
    updateItemSubtotal(index);
    calculateTotal();
});

function updateItemSubtotal(index) {
    const row = $(`.item-row[data-index="${index}"]`);
    const harga = parseFloat(row.find(`input[name="items[${index}][harga_satuan]"]`).val()) || 0;
    const quantity = parseFloat(row.find(`input[name="items[${index}][quantity]"]`).val()) || 0;
    const diskon = parseFloat(row.find(`input[name="items[${index}][diskon_item_persen]"]`).val()) || 0;
    
    const subtotalSebelumDiskon = harga * quantity;
    const diskonAmount = subtotalSebelumDiskon * (diskon / 100);
    const subtotal = subtotalSebelumDiskon - diskonAmount;
    
    row.find(`.item-subtotal[data-index="${index}"]`).text(`Rp ${formatNumber(subtotal)}`);
}

function calculateTotal() {
    let subtotal = 0;
    
    // Hitung subtotal dari semua item
    $('.item-row').each(function() {
        const index = $(this).data('index');
        const harga = parseFloat($(this).find(`input[name="items[${index}][harga_satuan]"]`).val()) || 0;
        const quantity = parseFloat($(this).find(`input[name="items[${index}][quantity]"]`).val()) || 0;
        const diskon = parseFloat($(this).find(`input[name="items[${index}][diskon_item_persen]"]`).val()) || 0;
        
        const subtotalItem = harga * quantity * (1 - diskon / 100);
        subtotal += subtotalItem;
    });
    
    // Hitung diskon global
    const diskonPersen = parseFloat($('#diskonPersen').val()) || 0;
    const diskonAmount = subtotal * (diskonPersen / 100);
    const subtotalSetelahDiskon = subtotal - diskonAmount;
    
    // Hitung PPN
    const ppnPersen = parseFloat($('#ppnPersen').val()) || 0;
    const ppnAmount = subtotalSetelahDiskon * (ppnPersen / 100);
    
    // Hitung biaya lain
    const biayaLain = parseFloat($('#biayaLain').val()) || 0;
    
    // Total
    const total = subtotalSetelahDiskon + ppnAmount + biayaLain;
    
    // Update display
    $('#subtotalDisplay').text(`Rp ${formatNumber(subtotal)}`);
    $('#diskonAmountDisplay').text(`Rp ${formatNumber(diskonAmount)}`);
    $('#ppnAmountDisplay').text(`Rp ${formatNumber(ppnAmount)}`);
    $('#totalDisplay').text(`Rp ${formatNumber(total)}`);
}

function getTypeLabel(type) {
    const labels = {
        'produk': 'Produk',
        'layanan_jasa': 'Jasa',
        'layanan_pppoe': 'Internet Rumahan',
        'layanan_hotspot': 'Internet Hotspot'
    };
    return labels[type] || type;
}

function formatNumber(num) {
    return new Intl.NumberFormat('id-ID').format(num);
}

// Validasi form sebelum submit
$('#pembelianForm').on('submit', function(e) {
    if ($('#itemsContainer .item-row').length === 0) {
        e.preventDefault();
        alert('Mohon tambahkan minimal 1 item pembelian!');
        return false;
    }
    
    $('#submitBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Menyimpan...');
});
</script>
@endpush

@push('styles')
<style>
.item-row {
    background-color: #f8f9fa;
}
.sticky-top {
    z-index: 1020;
}
</style>
@endpush