@extends('layouts.app')

@section('title', 'New Recurring Bill')

@section('content')
<div class="mb-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-1 small text-uppercase">
            <li class="breadcrumb-item"><a href="{{ route('recurring-bills.index') }}" class="text-decoration-none">Recurring Bills</a></li>
            <li class="breadcrumb-item active">New Profile</li>
        </ol>
    </nav>
    <h2 class="h4 mb-0 text-dark fw-bold">Create Recurring Bill</h2>
</div>

<form action="{{ route('recurring-bills.store') }}" method="POST" id="billForm">
    @csrf
    <div class="row g-4">
        <div class="col-lg-12">
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-body p-4">
                    <div class="row g-4 mb-5">
                        <div class="col-md-4">
                            <label class="form-label small text-muted fw-bold text-uppercase">Vendor Name *</label>
                            <select name="vendor_id" class="form-select select2" required>
                                <option value="">Select Vendor</option>
                                @foreach($vendors as $vendor)
                                    <option value="{{ $vendor->id }}">{{ $vendor->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small text-muted fw-bold text-uppercase">Profile Name *</label>
                            <input type="text" name="profile_name" class="form-control" placeholder="e.g. Monthly Azure Fee" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small text-muted fw-bold text-uppercase">Repeat Every *</label>
                            <div class="input-group">
                                <input type="number" name="interval_value" class="form-control w-25" value="1" min="1" required>
                                <select name="frequency" class="form-select w-75" required>
                                    <option value="daily">Day(s)</option>
                                    <option value="weekly">Week(s)</option>
                                    <option value="monthly" selected>Month(s)</option>
                                    <option value="yearly">Year(s)</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small text-muted fw-bold text-uppercase">Start Date *</label>
                            <input type="date" name="start_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small text-muted fw-bold text-uppercase">End Date (Optional)</label>
                            <input type="date" name="end_date" class="form-control">
                        </div>
                    </div>

                    <div class="table-responsive mb-4">
                        <table class="table table-hover align-middle" id="itemsTable">
                            <thead class="bg-light text-muted small text-uppercase">
                                <tr>
                                    <th style="width: 40%">Item Details</th>
                                    <th>Quantity</th>
                                    <th>Rate</th>
                                    <th class="text-end">Amount</th>
                                    <th style="width: 50px"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="item-row">
                                    <td>
                                        <input type="text" name="items[0][item_name]" class="form-control" placeholder="Type item name..." required>
                                    </td>
                                    <td>
                                        <input type="number" name="items[0][quantity]" class="form-control qty" step="0.01" value="1" required>
                                    </td>
                                    <td>
                                        <div class="input-group">
                                            <span class="input-group-text bg-white">{{ getCurrencySymbol() }}</span>
                                            <input type="number" name="items[0][rate]" class="form-control rate" step="0.01" value="0" required>
                                        </div>
                                    </td>
                                    <td class="text-end">
                                        <span class="fw-bold line-total">{{ formatCurrency(0) }}</span>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-link text-danger remove-row"><i class="fas fa-times"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <button type="button" class="btn btn-sm btn-outline-primary fw-bold" id="addRow">
                            <i class="fas fa-plus me-1"></i> Add Item
                        </button>
                    </div>

                    <div class="row justify-content-end">
                        <div class="col-md-5">
                            <div class="bg-light p-4 rounded-4">
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted small fw-bold">SUB TOTAL</span>
                                    <input type="hidden" name="subtotal" id="subtotal_val" value="0">
                                    <span id="subtotal_display" class="fw-bold">{{ formatCurrency(0) }}</span>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label small text-muted fw-bold text-uppercase">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_val" value="0">
                                    <div class="text-end mt-1 small text-muted" id="tax_display">{{ formatCurrency(0) }}</div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center border-top pt-3">
                                    <span class="h5 mb-0 fw-bold">TOTAL</span>
                                    <input type="hidden" name="total" id="total_val" value="0">
                                    <span id="total_display" class="h4 mb-0 fw-bold text-primary">{{ formatCurrency(0) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row g-4 mt-4 mt-md-0">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label small text-muted fw-bold text-uppercase">Notes</label>
                                <textarea name="notes" class="form-control" rows="3"></textarea>
                            </div>
                            <div class="mb-0">
                                <label class="form-label small text-muted fw-bold text-uppercase">Terms & Conditions</label>
                                <textarea name="terms" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="col-md-6 d-flex flex-column justify-content-center">
                            <div class="card bg-light border-0 p-4">
                                <h6 class="fw-bold mb-3">Automation Settings</h6>
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" name="auto_create_bill" value="1" id="autoCreate" checked>
                                    <label class="form-check-label fw-bold" for="autoCreate">Auto Create Bill</label>
                                    <div class="small text-muted">Generate a draft bill automatically on next run date.</div>
                                </div>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="auto_approve_bill" value="1" id="autoApprove">
                                    <label class="form-check-label fw-bold" for="autoApprove">Auto Approve Bill</label>
                                    <div class="small text-muted">Directly mark the generated bill as Approved.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-white p-4 border-top">
                    <button type="submit" class="btn btn-primary px-5 py-2 fw-bold shadow-sm">Save & Activate</button>
                    <a href="{{ route('recurring-bills.index') }}" class="btn btn-light px-5 py-2 border fw-bold text-muted ms-2">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</form>

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

    const currencySymbol = "{{ getCurrencySymbol() }} ";
    const calculateTotals = () => {
        let subtotal = 0;
        document.querySelectorAll('.item-row').forEach(row => {
            const qty = parseFloat(row.querySelector('.qty').value) || 0;
            const rate = parseFloat(row.querySelector('.rate').value) || 0;
            const amount = qty * rate;
            row.querySelector('.line-total').textContent = currencySymbol + amount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            subtotal += amount;
        });

        const taxRate = parseFloat(document.getElementById('tax_id').selectedOptions[0].dataset.rate) || 0;
        const taxAmount = (subtotal * taxRate) / 100;
        const total = subtotal + taxAmount;

        document.getElementById('subtotal_display').textContent = currencySymbol + subtotal.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        document.getElementById('subtotal_val').value = subtotal.toFixed(2);
        document.getElementById('tax_display').textContent = currencySymbol + taxAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        document.getElementById('tax_amount_val').value = taxAmount.toFixed(2);
        document.getElementById('total_display').textContent = currencySymbol + total.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        document.getElementById('total_val').value = total.toFixed(2);
    };

    document.getElementById('addRow').addEventListener('click', () => {
        const tbody = document.querySelector('#itemsTable tbody');
        const row = document.createElement('tr');
        row.className = 'item-row';
        row.innerHTML = `
            <td><input type="text" name="items[${rowCount}][item_name]" class="form-control" placeholder="Type item name..." required></td>
            <td><input type="number" name="items[${rowCount}][quantity]" class="form-control qty" step="0.01" value="1" required></td>
            <td><input type="number" name="items[${rowCount}][rate]" class="form-control rate" step="0.01" value="0" required></td>
            <td class="text-end"><span class="fw-bold line-total">{{ formatCurrency(0) }}</span></td>
            <td><button type="button" class="btn btn-sm btn-link text-danger remove-row"><i class="fas fa-times"></i></button></td>
        `;
        tbody.appendChild(row);
        rowCount++;
    });

    document.querySelector('#itemsTable').addEventListener('input', (e) => {
        if (e.target.classList.contains('qty') || e.target.classList.contains('rate')) {
            calculateTotals();
        }
    });

    document.querySelector('#itemsTable').addEventListener('click', (e) => {
        if (e.target.closest('.remove-row')) {
            const rows = document.querySelectorAll('.item-row');
            if (rows.length > 1) {
                e.target.closest('.item-row').remove();
                calculateTotals();
            }
        }
    });

    document.getElementById('tax_id').addEventListener('change', calculateTotals);
});
</script>
@endsection