@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto py-6">
    <h1 class="text-2xl font-bold mb-6">Bill</h1>

    <form action="{{route('bill.store')}}" method="POST">
        @csrf

        @foreach ($cartWithDetails as $index => $item)
            @php
                $product = $item['product'];
                $qty = $item['qty'];
            @endphp
<div class="border p-4 rounded mb-6 bg-white shadow-sm">
            <label class="block font-medium">Apply Price Type To All Products:</label>
            <select id="global-price-type" name="price_type" class="border p-2 rounded w-full">
                <option value="">Select Price Type For All</option>
                <option value="retail">Retail Price</option>
                <option value="doctor">Doctor Price</option>
                <option value="local">Local Price</option>
                <option value="purchase">Purchase Price</option>
            </select>
        </div>
            <div class="border p-4 rounded mb-6 bg-white shadow-sm">
                <h2 class="text-lg font-semibold mb-2">Product {{ $index + 1 }}</h2>

                <input type="hidden" name="products[{{ $index }}][id]" value="{{ $product->id }}">
                <input type="hidden" name="products[{{ $index }}][qty]" value="{{ $qty }}">
                <input type="hidden" name="products[{{ $index }}][retail_price]" value="{{ $product->retail_price }}">
                <input type="hidden" name="products[{{ $index }}][price_per_piece]" value="{{ $product->price_per_piece }}">
                <p><strong>Name:</strong> {{ $product->name }}</p>
                <p><strong>Company:</strong> {{ $product->company }}</p>
                <p><strong>Salt:</strong> {{ $product->salt }}</p>
                <p><strong>Category:</strong> 
                    {{ is_array($product->categories) ? implode(', ', $product->categories) : $product->categories }}
                </p>
                <p><strong>Qty:</strong> {{ $qty }}</p>
                <p><strong>Retail Price:</strong> {{ $product->retail_price }}</p>
                <p><strong>Price Per Piece:</strong> {{ $product->price_per_piece }}</p>

                <input type="hidden" name="products[{{ $index }}][sold_as]" value="packet">

                <div class="mt-2 price-type-section" id="price-type-section-{{ $index }}">
                    <label class="block font-medium">Price:</label>
                    <input 
                        type="number" 
                        name="products[{{ $index }}][price]" 
                        class="border p-2 rounded w-full price-select individual-price" 
                        data-index="{{ $index }}"
                        data-qty="{{ $qty }}"
                        data-retail="{{ $product->retail_price }}"
                        data-doctor="{{ $product->doctor_price }}"
                        data-local="{{ $product->local_price }}"
                        data-purchase="{{ $product->purchase_price }}"
                        placeholder="Enter price"
                        step="0.01"
                        min="0"
                        value="{{ $product->retail_price }}"
                        required
                    >
                </div>

                <div class="mt-2">
                    <label class="block font-medium">Total Amount:</label>
                    <input 
                        type="text" 
                        name="products[{{ $index }}][total]" 
                        class="border p-2 rounded w-full total-amount" 
                        readonly
                        id="total-amount-{{ $index }}"
                    >
                </div>

                <div class="mt-2 price-diff-section" id="price-diff-section-{{ $index }}">
                    <label class="block font-medium">Price Difference (Retail - Selected):</label>
                    <input 
                        type="text" 
                        name="products[{{ $index }}][price_diff]" 
                        class="border p-2 rounded w-full price-diff" 
                        readonly
                        id="price-diff-{{ $index }}"
                    >
                </div>
            </div>
        @endforeach
        
        <!-- Global Price Type Selector -->
        

        <!-- Rest of your form fields -->
        <div class="border p-4 rounded mb-6 bg-white shadow-sm">
            <label class="block font-medium">Bill Date:</label>
            <input type="date" name="date" class="border p-2 rounded w-full">
            <p class="text-sm text-gray-500 mt-1">Leave empty to use current date</p>
        </div>
        
        <div class="border p-4 rounded mb-6 bg-white shadow-sm">
            <label class="block font-medium">Total Amount of All Products:</label>
            <input type="text" id="grand-total-amount" name="grand_total" class="border p-2 rounded w-full" readonly>
        </div>

        <div class="border p-4 rounded mb-6 bg-white shadow-sm">
            <label class="block font-medium">Print Type:</label>
            <select name="print_type" class="border p-2 rounded w-full">
                <option value="by_name">By Name</option>
                <option value="by_salt">By Salt</option>
            </select>
        </div>

        <div class="border p-4 rounded mb-6 bg-white shadow-sm">
            <label class="block font-medium">Remarks:</label>
            <textarea name="remarks" class="border p-2 rounded w-full"></textarea>
        </div>

        <div class="border p-4 rounded mb-6 bg-white shadow-sm">
            <label class="block font-medium">Sale Type:</label>
            <select name="sale_type" class="border p-2 rounded w-full">
                <option value="stock">Stock</option>
            </select>
        </div>

        <div class="border p-4 rounded mb-6 bg-white shadow-sm">
            <label class="block font-medium">Payment Type:</label>
            <select name="payment_type" id="payment-type" class="border p-2 rounded w-full">
                <option value="cash">Cash</option>
                <option value="credit">Credit</option>
            </select>
        </div>

        {{-- Credit Customer Info --}}
        <div id="credit-info" class="hidden">
            <label>Search Customer:</label>
            <input type="text" id="customer-search" class="border rounded px-2 py-1 w-full" placeholder="Enter name or phone...">
            <input type="hidden" name="customer_id" id="customer_id">
            <div id="customer-suggestions" class="mt-2"></div>

            <div id="new-customer-fields" class="mt-2 hidden">
                <input type="text" name="new_customer_name" class="border rounded px-2 py-1 w-full mb-2" placeholder="Customer Name">
                <input type="text" name="new_customer_phone" class="border rounded px-2 py-1 w-full" placeholder="Customer Phone">
                <input type="text" name="new_customer_address" class="border rounded px-2 py-1 w-full" placeholder="Customer Address">
            </div>
        </div>

        {{-- Cash Customer Info --}}
        <div id="cash-info" class="mt-2">
            <input type="text" name="cash_customer_name" class="border rounded px-2 py-1 w-full" placeholder="Customer Name">
        </div>

        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">Submit Bill</button>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle price changes
    document.querySelectorAll('.price-select').forEach(input => {
        input.addEventListener('input', function() {
            const index = this.dataset.index;
            calculateTotalForProduct(index);
        });
    });

    // Global price type change handler
    document.getElementById('global-price-type').addEventListener('change', function() {
        const priceType = this.value;
        if (!priceType) return;

        document.querySelectorAll('.individual-price').forEach(input => {
            const price = input.dataset[priceType];
            if (price) {
                input.value = price;
                const index = input.dataset.index;
                calculateTotalForProduct(index);
            }
        });
    });

    // Function to calculate total for a single product
    function calculateTotalForProduct(index) {
        const qty = parseFloat(document.querySelector(`input[name="products[${index}][qty]"]`).value || 0);
        const retailPrice = parseFloat(document.querySelector(`input[name="products[${index}][retail_price]"]`).value || 0);
        const selectedPrice = parseFloat(document.querySelector(`.price-select[data-index="${index}"]`).value || 0);
        
        const total = selectedPrice * qty;
        const priceDiff = selectedPrice - retailPrice;

        const totalInput = document.getElementById(`total-amount-${index}`);
        const diffInput = document.getElementById(`price-diff-${index}`);
        
        if (totalInput) totalInput.value = total.toFixed(2);
        if (diffInput) diffInput.value = priceDiff.toFixed(2);

        updateGrandTotal();
    }

    // Function to update grand total
    function updateGrandTotal() {
        let grandTotal = 0;
        document.querySelectorAll('.total-amount').forEach(input => {
            const val = parseFloat(input.value || 0);
            grandTotal += val;
        });
        document.getElementById('grand-total-amount').value = grandTotal.toFixed(2);
    }

    // Payment type toggle
    document.getElementById('payment-type').addEventListener('change', function() {
        const creditInfo = document.getElementById('credit-info');
        const cashInfo = document.getElementById('cash-info');

        if (this.value === 'credit') {
            creditInfo.classList.remove('hidden');
            cashInfo.classList.add('hidden');
        } else {
            creditInfo.classList.add('hidden');
            cashInfo.classList.remove('hidden');
        }
    });

    // Initialize payment type on page load
    const paymentType = document.getElementById('payment-type');
    if (paymentType.value === 'credit') {
        document.getElementById('credit-info').classList.remove('hidden');
        document.getElementById('cash-info').classList.add('hidden');
    } else {
        document.getElementById('credit-info').classList.add('hidden');
        document.getElementById('cash-info').classList.remove('hidden');
    }

    // Customer search functionality
    document.getElementById('customer-search')?.addEventListener('input', function() {
        const query = this.value.trim();
        const suggestionBox = document.getElementById('customer-suggestions');
        suggestionBox.innerHTML = '';

        if (query.length >= 2) {
            fetch(`/customers/search?q=${query}`)
                .then(res => res.json())
                .then(data => {
                    if (data.length > 0) {
                        data.forEach(cust => {
                            const div = document.createElement('div');
                            div.className = 'p-2 bg-white border cursor-pointer hover:bg-gray-100';
                            div.textContent = `${cust.name} (${cust.phone})`;
                            div.addEventListener('click', () => {
                                document.getElementById('customer_id').value = cust.id;
                                document.getElementById('customer-search').value = `${cust.name} (${cust.phone})`;
                                document.getElementById('new-customer-fields').classList.add('hidden');
                                suggestionBox.innerHTML = '';
                            });
                            suggestionBox.appendChild(div);
                        });
                    } else {
                        document.getElementById('new-customer-fields').classList.remove('hidden');
                        document.getElementById('customer_id').value = '';
                    }
                });
        }
    });

    // Calculate all totals on page load
    document.querySelectorAll('.price-select').forEach(input => {
        const index = input.dataset.index;
        calculateTotalForProduct(index);
    });
});
</script>
@endsection