@extends('layouts.app')

@section('title', 'Edit 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">Edit Profile</li>
        </ol>
    </nav>
    <h2 class="h4 mb-0 text-dark fw-bold">Edit Recurring Bill</h2>
</div>

<form action="{{ route('recurring-bills.update', $recurringBill) }}" method="POST" id="billForm">
    @csrf
    @method('PUT')
    <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 }}" {{ $recurringBill->vendor_id == $vendor->id ? 'selected' : '' }}>{{ $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" value="{{ $recurringBill->profile_name }}" 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="{{ $recurringBill->interval_value }}" min="1" required>
                                <select name="frequency" class="form-select w-75" required>
                                    <option value="daily" {{ $recurringBill->frequency == 'daily' ? 'selected' : '' }}>Day(s)</option>
                                    <option value="weekly" {{ $recurringBill->frequency == 'weekly' ? 'selected' : '' }}>Week(s)</option>
                                    <option value="monthly" {{ $recurringBill->frequency == 'monthly' ? 'selected' : '' }}>Month(s)</option>
                                    <option value="yearly" {{ $recurringBill->frequency == 'yearly' ? 'selected' : '' }}>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="{{ $recurringBill->start_date->format('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" value="{{ $recurringBill->end_date ? $recurringBill->end_date->format('Y-m-d') : '' }}">
                        </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>
                                @foreach($recurringBill->items as $index => $item)
                                <tr class="item-row">
                                    <td>
                                        <input type="text" name="items[{{ $index }}][item_name]" class="form-control" value="{{ $item->item_name }}" required>
                                    </td>
                                    <td>
                                        <input type="number" name="items[{{ $index }}][quantity]" class="form-control qty" step="0.01" value="{{ $item->quantity }}" required>
                                    </td>
                                    <td>
                                        <input type="number" name="items[{{ $index }}][rate]" class="form-control rate" step="0.01" value="{{ $item->rate }}" required>
                                    </td>
                                    <td class="text-end">
                                        <span class="fw-bold line-total">{{ formatCurrency($item->amount) }}</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>
                                @endforeach
                            </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="{{ $recurringBill->subtotal }}">
                                    <span id="subtotal_display" class="fw-bold">{{ formatCurrency($recurringBill->subtotal) }}</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 }}" {{ $recurringBill->tax_id == $tax->id ? 'selected' : '' }}>{{ $tax->name }} ({{ $tax->rate }}%)</option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" name="tax_amount" id="tax_amount_val" value="{{ $recurringBill->tax_amount }}">
                                    <div class="text-end mt-1 small text-muted" id="tax_display">{{ formatCurrency($recurringBill->tax_amount) }}</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="{{ $recurringBill->total }}">
                                    <span id="total_display" class="h4 mb-0 fw-bold text-primary">{{ formatCurrency($recurringBill->total) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row g-4 mt-4">
                        <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">{{ $recurringBill->notes }}</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">{{ $recurringBill->terms }}</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" {{ $recurringBill->auto_create_bill ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="autoCreate">Auto Create Bill</label>
                                </div>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="auto_approve_bill" value="1" id="autoApprove" {{ $recurringBill->auto_approve_bill ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="autoApprove">Auto Approve Bill</label>
                                </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 Changes</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>

<!-- Use same script as create -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    let rowCount = {{ $recurringBill->items->count() }};
    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')) {
            if (document.querySelectorAll('.item-row').length > 1) {
                e.target.closest('.item-row').remove();
                calculateTotals();
            }
        }
    });
    document.getElementById('tax_id').addEventListener('change', calculateTotals);
});
</script>
@endsection