@extends('layouts.app')

@section('title', 'New Bill')
@section('page-title', 'New Bill')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-11">
        <form action="{{ route('bills.store') }}" method="POST" id="billForm">
            @csrf
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-body p-4">
                    <div class="row g-4">
                        <div class="col-md-4">
                            <label class="form-label fw-bold small text-muted text-uppercase">Vendor <span class="text-danger">*</span></label>
                            <select name="vendor_id" class="form-select @error('vendor_id') is-invalid @enderror" required>
                                <option value="">Select Vendor</option>
                                @foreach($vendors as $vendor)
                                    <option value="{{ $vendor->id }}" {{ old('vendor_id') == $vendor->id ? 'selected' : '' }}>{{ $vendor->name }}</option>
                                @endforeach
                            </select>
                            @error('vendor_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-2">
                            <label class="form-label fw-bold small text-muted text-uppercase">Bill Number <span class="text-danger">*</span></label>
                            <input type="text" name="bill_number" class="form-control @error('bill_number') is-invalid @enderror" value="{{ old('bill_number', 'BILL-' . strtoupper(Str::random(6))) }}" required>
                            @error('bill_number') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Bill Date <span class="text-danger">*</span></label>
                            <input type="date" name="bill_date" class="form-control @error('bill_date') is-invalid @enderror" value="{{ old('bill_date', date('Y-m-d')) }}" required>
                            @error('bill_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Due Date <span class="text-danger">*</span></label>
                            <input type="date" name="due_date" class="form-control @error('due_date') is-invalid @enderror" value="{{ old('due_date', date('Y-m-d', strtotime('+15 days'))) }}" required>
                            @error('due_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-header bg-white py-3 border-bottom">
                    <h5 class="mb-0 fw-bold text-primary">Item Details</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0" id="itemsTable">
                            <thead class="bg-light">
                                <tr>
                                    <th class="ps-4" style="width: 40%;">ITEM NAME</th>
                                    <th style="width: 15%;">QUANTITY</th>
                                    <th style="width: 20%;">RATE</th>
                                    <th style="width: 20%;">AMOUNT</th>
                                    <th class="text-end pe-4" style="width: 5%;"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="item-row">
                                    <td class="ps-4">
                                        <select name="items[0][item_id]" class="form-select item-selector" required>
                                            <option value="">Select an item</option>
                                            @foreach($items as $item)
                                                <option value="{{ $item->id }}" data-price="{{ $item->purchase_price }}" data-description="{{ $item->purchase_description }}">{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="items[0][item_name]" class="item-name-input">
                                    </td>
                                    <td>
                                        <input type="number" name="items[0][quantity]" class="form-control quantity" value="1" min="1" required>
                                    </td>
                                    <td>
                                        <div class="input-group">
                                            <span class="input-group-text bg-white border-end-0">{{ getCurrencySymbol() }}</span>
                                            <input type="number" step="0.01" name="items[0][rate]" class="form-control rate border-start-0" placeholder="0.00" required>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="fw-bold ps-2 amount text-primary">{{ getCurrencySymbol() }} 0.00</div>
                                    </td>
                                    <td class="text-end pe-4">
                                        <button type="button" class="btn btn-sm btn-outline-danger remove-row" disabled><i class="fas fa-times"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="p-3 bg-light border-top">
                        <button type="button" class="btn btn-light btn-sm border shadow-sm rounded-pill px-3" id="addRow">
                            <i class="fas fa-plus me-2 text-primary"></i> Add Row
                        </button>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm rounded-4 h-100">
                        <div class="card-body p-4">
                            <label class="form-label fw-bold small text-muted text-uppercase">Notes</label>
                            <textarea name="notes" class="form-control" rows="4" placeholder="Thanks for your business!"></textarea>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 text-end">
                    <div class="card border-0 shadow-sm rounded-4 h-100">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-muted">Subtotal</span>
                                <span class="fw-bold fs-5" id="subtotalDisplay">{{ getCurrencySymbol() }} 0.00</span>
                            </div>
                            <div class="mb-3 text-start">
                                <label for="tax_id" class="form-label text-muted small fw-bold">Tax</label>
                                <select name="tax_id" id="tax_id" class="form-select form-select-sm">
                                    <option value="" data-rate="0">No Tax (0%)</option>
                                    @foreach($taxes as $tax)
                                        <option value="{{ $tax->id }}" data-rate="{{ $tax->rate }}">{{ $tax->name }} ({{ $tax->rate }}%)</option>
                                    @endforeach
                                </select>
                                <input type="hidden" name="tax_amount" id="tax-amount-input" value="0.00">
                            </div>
                            <div class="d-flex justify-content-between mb-3 pb-3 border-bottom">
                                <span class="text-muted">Tax Amount</span>
                                <span class="fw-bold fs-5" id="taxDisplay">{{ getCurrencySymbol() }} 0.00</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <span class="h5 mb-0 fw-bold">Total Amount</span>
                                <span class="h3 mb-0 fw-bold text-primary" id="totalDisplay">{{ getCurrencySymbol() }} 0.00</span>
                            </div>
                            <div class="d-flex gap-2 justify-content-end mt-4">
                                <button type="submit" class="btn btn-primary px-5 py-2 rounded-pill">Save Bill</button>
                                <a href="{{ route('bills.index') }}" class="btn btn-light border px-4 py-2 rounded-pill">Cancel</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let rowCount = 1;

    const currencySymbol = '{{ getCurrencySymbol() }} ';

    function calculateRowAmount(row) {
        let qty = row.querySelector('.quantity').value || 0;
        let rate = row.querySelector('.rate').value || 0;
        let amount = qty * rate;
        row.querySelector('.amount').innerText = currencySymbol + amount.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
        return amount;
    }

    function calculateGrandTotal() {
        let subtotal = 0;
        document.querySelectorAll('.item-row').forEach(row => {
            subtotal += calculateRowAmount(row);
        });
        
        const taxSelect = document.getElementById('tax_id');
        const selectedTaxOption = taxSelect.options[taxSelect.selectedIndex];
        const taxRate = parseFloat(selectedTaxOption.getAttribute('data-rate')) || 0;
        const taxAmount = (subtotal * taxRate) / 100;
        const total = subtotal + taxAmount;

        document.getElementById('tax-amount-input').value = taxAmount.toFixed(2);
        document.getElementById('subtotalDisplay').innerText = currencySymbol + subtotal.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
        document.getElementById('taxDisplay').innerText = currencySymbol + taxAmount.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
        document.getElementById('totalDisplay').innerText = currencySymbol + total.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
    }

    document.getElementById('tax_id').addEventListener('change', calculateGrandTotal);

    document.getElementById('addRow').addEventListener('click', function() {
        let tbody = document.querySelector('#itemsTable tbody');
        let newRow = tbody.querySelector('.item-row').cloneNode(true);
        
        newRow.querySelectorAll('input, select').forEach(input => {
            input.value = '';
            if(input.classList.contains('quantity')) input.value = 1;
            input.name = input.name.replace(/\[\d+\]/, '[' + rowCount + ']');
        });
        
        newRow.querySelector('.amount').innerText = currencySymbol + '0.00';
        newRow.querySelector('.remove-row').disabled = false;
        
        tbody.appendChild(newRow);
        rowCount++;
    });

    document.querySelector('#itemsTable').addEventListener('change', function(e) {
        if (e.target.classList.contains('item-selector')) {
            const row = e.target.closest('.item-row');
            const selectedOption = e.target.options[e.target.selectedIndex];
            const price = selectedOption.getAttribute('data-price') || 0;
            const name = selectedOption.text;
            
            row.querySelector('.rate').value = price;
            row.querySelector('.item-name-input').value = name;
            calculateGrandTotal();
        }
    });

    document.querySelector('#itemsTable').addEventListener('click', function(e) {
        if (e.target.closest('.remove-row')) {
            e.target.closest('.item-row').remove();
            calculateGrandTotal();
            if(document.querySelectorAll('.item-row').length === 1) {
                document.querySelector('.remove-row').disabled = true;
            }
        }
    });

    document.querySelector('#itemsTable').addEventListener('input', function(e) {
        if (e.target.classList.contains('quantity') || e.target.classList.contains('rate')) {
            calculateGrandTotal();
        }
    });
});
</script>
@endpush
@endsection