@extends('admin.layouts.app')

@section('head', 'Tambah Transaksi')

@section('body')
    <div class="main-content container-fluid">
        <!-- Header -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="h3 mb-0 text-gray-800">
                <i class="fas fa-plus"></i> Tambah Transaksi Baru
            </h1>
            <a href="{{ route('transaction.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Kembali
            </a>
        </div>

        <!-- Alert Messages -->
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
                <button type="button" class="close" data-dismiss="alert">
                    <span>&times;</span>
                </button>
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle"></i> Terdapat kesalahan:
                <ul class="mb-0 mt-2">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="close" data-dismiss="alert">
                    <span>&times;</span>
                </button>
            </div>
        @endif

        <form method="POST" action="{{ route('transaction.store') }}" id="transactionForm">
            @csrf
            <div class="row">
                <!-- Customer & Payment Info -->
                <div class="col-md-4">
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">Informasi Customer & Pembayaran</h6>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label for="user_id" class="form-label">Customer <span class="text-danger">*</span></label>
                                <select class="form-control @error('user_id') is-invalid @enderror" id="user_id"
                                    name="user_id" required>
                                    <option value="">Pilih Customer</option>
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}"
                                            {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }} - {{ $user->email }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('user_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="payment_method" class="form-label">Metode Pembayaran <span
                                        class="text-danger">*</span></label>
                                <select class="form-control @error('payment_method') is-invalid @enderror"
                                    id="payment_method" name="payment_method" required>
                                    <option value="">Pilih Metode Pembayaran</option>
                                    <option value="cash" {{ old('payment_method') == 'cash' ? 'selected' : '' }}>Cash
                                    </option>
                                    <option value="transfer" {{ old('payment_method') == 'transfer' ? 'selected' : '' }}>
                                        Transfer Bank</option>
                                    <option value="qris" {{ old('payment_method') == 'qris' ? 'selected' : '' }}>QRIS
                                    </option>
                                    <option value="credit_card"
                                        {{ old('payment_method') == 'credit_card' ? 'selected' : '' }}>Credit Card</option>
                                    <option value="debit_card"
                                        {{ old('payment_method') == 'debit_card' ? 'selected' : '' }}>Debit Card</option>
                                    <option value="e_wallet" {{ old('payment_method') == 'e_wallet' ? 'selected' : '' }}>
                                        E-Wallet</option>
                                </select>
                                @error('payment_method')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="notes" class="form-label">Catatan</label>
                                <textarea class="form-control @error('notes') is-invalid @enderror" id="notes" name="notes" rows="3"
                                    placeholder="Catatan tambahan untuk transaksi ini">{{ old('notes') }}</textarea>
                                @error('notes')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Order Summary -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">Ringkasan Pesanan</h6>
                        </div>
                        <div class="card-body">
                            <div class="order-summary">
                                <div class="d-flex justify-content-between mb-2">
                                    <span>Total Item:</span>
                                    <span id="total-items">0</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span>Subtotal:</span>
                                    <span id="subtotal">Rp 0</span>
                                </div>
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <strong>Total:</strong>
                                    <strong id="total-amount">Rp 0</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Items -->
                <div class="col-md-8">
                    <div class="card shadow mb-4">
                        <div class="card-header py-3 d-flex justify-content-between align-items-center">
                            <h6 class="m-0 font-weight-bold text-primary">Item Pesanan</h6>
                            <button type="button" class="btn btn-sm btn-primary" id="add-item">
                                <i class="fas fa-plus"></i> Tambah Item
                            </button>
                        </div>
                        <div class="card-body">
                            <div id="items-container">
                                <!-- Items will be added here dynamically -->
                            </div>

                            @error('items')
                                <div class="alert alert-danger mt-3">{{ $message }}</div>
                            @enderror

                            @if ($errors->has('items.*'))
                                <div class="alert alert-danger mt-3">
                                    <ul class="mb-0">
                                        @foreach ($errors->get('items.*') as $error)
                                            <li>{{ $error[0] }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fas fa-save"></i> Simpan Transaksi
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- Item Template -->
    <template id="item-template">
        <div class="item-row border rounded p-3 mb-3">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h6 class="mb-0">Item <span class="item-number">1</span></h6>
                <button type="button" class="btn btn-sm btn-danger remove-item">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <label class="form-label">Produk Kue <span class="text-danger">*</span></label>
                    <select class="form-control product-select" name="items[0][product_id]" required>
                        <option value="">Pilih Produk</option>
                        @foreach ($products as $product)
                            <option value="{{ $product->id }}" data-price="{{ $product->price }}"
                                data-stock="{{ $product->stock }}">
                                {{ $product->name }} - Rp {{ number_format($product->price, 0, ',', '.') }} (Stok:
                                {{ $product->stock }})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Kuantitas <span class="text-danger">*</span></label>
                    <input type="number" class="form-control quantity-input" name="items[0][quantity]" min="1"
                        required>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Harga</label>
                    <input type="text" class="form-control price-display" readonly>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Subtotal</label>
                    <input type="text" class="form-control subtotal-display" readonly>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Stok</label>
                    <span class="form-control-plaintext stock-display">-</span>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-md-12">
                    <label class="form-label">Catatan Item</label>
                    <input type="text" class="form-control" name="items[0][notes]"
                        placeholder="Catatan khusus untuk item ini">
                </div>
            </div>
        </div>
    </template>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let itemCount = 0;
            const itemsContainer = document.getElementById('items-container');
            const addItemBtn = document.getElementById('add-item');
            const itemTemplate = document.getElementById('item-template');

            // Add first item on page load
            addItem();

            // Add item button click
            addItemBtn.addEventListener('click', function() {
                addItem();
            });

            function addItem() {
                const newItem = itemTemplate.content.cloneNode(true);

                // Update item number
                newItem.querySelector('.item-number').textContent = itemCount + 1;

                // Update form field names
                const inputs = newItem.querySelectorAll('input, select');
                inputs.forEach(input => {
                    if (input.name) {
                        input.name = input.name.replace('[0]', `[${itemCount}]`);
                    }
                });

                // Add event listeners
                const productSelect = newItem.querySelector('.product-select');
                const quantityInput = newItem.querySelector('.quantity-input');
                const priceDisplay = newItem.querySelector('.price-display');
                const subtotalDisplay = newItem.querySelector('.subtotal-display');
                const stockDisplay = newItem.querySelector('.stock-display');
                const removeBtn = newItem.querySelector('.remove-item');

                productSelect.addEventListener('change', function() {
                    const selectedOption = this.options[this.selectedIndex];
                    const price = selectedOption.dataset.price || 0;
                    const stock = selectedOption.dataset.stock || 0;

                    priceDisplay.value = formatRupiah(price);
                    stockDisplay.textContent = stock;

                    calculateSubtotal();
                });

                quantityInput.addEventListener('input', function() {
                    const selectedOption = productSelect.options[productSelect.selectedIndex];
                    const stock = parseInt(selectedOption.dataset.stock || 0);

                    if (this.value > stock) {
                        alert(`Kuantitas melebihi stok yang tersedia (${stock})`);
                        this.value = stock;
                    }

                    calculateSubtotal();
                });

                removeBtn.addEventListener('click', function() {
                    if (itemsContainer.children.length > 1) {
                        this.closest('.item-row').remove();
                        updateItemNumbers();
                        calculateTotal();
                    } else {
                        alert('Minimal harus ada 1 item');
                    }
                });

                function calculateSubtotal() {
                    const selectedOption = productSelect.options[productSelect.selectedIndex];
                    const price = parseFloat(selectedOption.dataset.price || 0);
                    const quantity = parseInt(quantityInput.value || 0);
                    const subtotal = price * quantity;

                    subtotalDisplay.value = formatRupiah(subtotal);
                    calculateTotal();
                }

                itemsContainer.appendChild(newItem);
                itemCount++;
            }

            function updateItemNumbers() {
                const items = itemsContainer.querySelectorAll('.item-row');
                items.forEach((item, index) => {
                    item.querySelector('.item-number').textContent = index + 1;

                    // Update form field names
                    const inputs = item.querySelectorAll('input, select');
                    inputs.forEach(input => {
                        if (input.name) {
                            input.name = input.name.replace(/\[\d+\]/, `[${index}]`);
                        }
                    });
                });
            }

            function calculateTotal() {
                const items = itemsContainer.querySelectorAll('.item-row');
                let totalItems = 0;
                let totalAmount = 0;

                items.forEach(item => {
                    const productSelect = item.querySelector('.product-select');
                    const quantityInput = item.querySelector('.quantity-input');

                    if (productSelect.value && quantityInput.value) {
                        const selectedOption = productSelect.options[productSelect.selectedIndex];
                        const price = parseFloat(selectedOption.dataset.price || 0);
                        const quantity = parseInt(quantityInput.value || 0);

                        totalItems += quantity;
                        totalAmount += price * quantity;
                    }
                });

                document.getElementById('total-items').textContent = totalItems;
                document.getElementById('subtotal').textContent = formatRupiah(totalAmount);
                document.getElementById('total-amount').textContent = formatRupiah(totalAmount);
            }

            function formatRupiah(amount) {
                return 'Rp ' + Number(amount).toLocaleString('id-ID');
            }

            // Form validation
            document.getElementById('transactionForm').addEventListener('submit', function(e) {
                const items = itemsContainer.querySelectorAll('.item-row');
                let hasValidItem = false;

                items.forEach(item => {
                    const productSelect = item.querySelector('.product-select');
                    const quantityInput = item.querySelector('.quantity-input');

                    if (productSelect.value && quantityInput.value) {
                        hasValidItem = true;
                    }
                });

                if (!hasValidItem) {
                    e.preventDefault();
                    alert('Tambahkan minimal 1 item yang valid');
                }
            });
        });
    </script>

    <style>
        .item-row {
            background-color: #f8f9fc;
            border: 1px solid #e3e6f0;
        }

        .order-summary {
            background-color: #f8f9fc;
            padding: 1rem;
            border-radius: 0.35rem;
        }

        .remove-item {
            opacity: 0.7;
            transition: opacity 0.2s;
        }

        .remove-item:hover {
            opacity: 1;
        }

        .form-control-plaintext {
            display: flex;
            align-items: center;
            padding: 0.375rem 0.75rem;
            margin-bottom: 0;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #6c757d;
        }
    </style>
@endsection