@extends('layouts.app')

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

@push('css')
<style>
    .sticky-summary {
        position: sticky;
        top: 20px;
    }
    .form-section-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #0d6efd;
        border-bottom: 2px solid #eef2f7;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    .calculation-summary-card {
        background-color: #f8f9fa;
        border: 1px solid #eef2f7;
    }
    .item-table th {
        background-color: #f8f9fa;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        color: #6c757d;
    }
</style>
@endpush

@section('content')
<div class="row align-items-center mb-4">
    <div class="col">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="{{ route('recurring-invoices.index') }}">Recurring Invoices</a></li>
                <li class="breadcrumb-item active" aria-current="page">New Recurring Invoice</li>
            </ol>
        </nav>
        <h2 class="h4 mb-0">New Recurring Invoice</h2>
    </div>
</div>

<form action="{{ route('recurring-invoices.store') }}" method="POST" id="recurring-invoice-form">
    @csrf
    <div class="row">
        <!-- Left Column: Form Details -->
        <div class="col-lg-8">
            <div class="card stat-card border-0 mb-4">
                <div class="card-body p-4">
                    <!-- Section 1: Customer Details -->
                    <div class="form-section-title">
                        <i class="fas fa-user-circle me-2"></i> Customer Details
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-6 mb-3">
                            <label for="customer_id" class="form-label text-muted small fw-bold">Customer Name *</label>
                            <select name="customer_id" id="customer_id" class="form-select @error('customer_id') is-invalid @enderror" required>
                                <option value="">Select Customer</option>
                                @foreach($customers as $customer)
                                    <option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>{{ $customer->name }}</option>
                                @endforeach
                            </select>
                            @error('customer_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="profile_name" class="form-label text-muted small fw-bold">Profile Name *</label>
                            <input type="text" name="profile_name" id="profile_name" class="form-control @error('profile_name') is-invalid @enderror" value="{{ old('profile_name') }}" placeholder="e.g. Monthly Maintenance" required>
                            @error('profile_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <!-- Section 2: Recurring Settings -->
                    <div class="form-section-title">
                        <i class="fas fa-calendar-alt me-2"></i> Schedule Settings
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-4 mb-3">
                            <label for="start_date" class="form-label text-muted small fw-bold">Start Date *</label>
                            <input type="date" name="start_date" id="start_date" class="form-control @error('start_date') is-invalid @enderror" value="{{ old('start_date', date('Y-m-d')) }}" required>
                            @error('start_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="end_date" class="form-label text-muted small fw-bold">End Date</label>
                            <input type="date" name="end_date" id="end_date" class="form-control @error('end_date') is-invalid @enderror" value="{{ old('end_date') }}">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="frequency" class="form-label text-muted small fw-bold">Repeat Every *</label>
                            <div class="input-group">
                                <input type="number" name="interval_value" id="interval_value" class="form-control" value="{{ old('interval_value', 1) }}" min="1" required style="width: 40%;">
                                <select name="frequency" id="frequency" class="form-select" required style="width: 60%;">
                                    <option value="daily" {{ old('frequency') == 'daily' ? 'selected' : '' }}>Day(s)</option>
                                    <option value="weekly" {{ old('frequency') == 'weekly' ? 'selected' : '' }}>Week(s)</option>
                                    <option value="monthly" {{ old('frequency', 'monthly') == 'monthly' ? 'selected' : '' }}>Month(s)</option>
                                    <option value="yearly" {{ old('frequency') == 'yearly' ? 'selected' : '' }}>Year(s)</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="alert alert-light border-0 small mb-4 py-2">
                        <i class="fas fa-info-circle text-primary me-2"></i>
                        Next Run Date: <span id="display-next-run" class="fw-bold">-</span>
                        <input type="hidden" name="next_run_date" id="next_run_date_input">
                    </div>

                    <!-- Section 3: Item Table -->
                    <div class="form-section-title d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-list me-2"></i> Item Details</span>
                        <button type="button" class="btn btn-outline-primary btn-sm" id="add-row">
                            <i class="fas fa-plus me-1"></i> Add Item
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="table item-table align-middle" id="items-table">
                            <thead>
                                <tr>
                                    <th style="width: 45%;">Item Name</th>
                                    <th style="width: 15%; text-align: center;">Qty</th>
                                    <th style="width: 20%; text-align: right;">Rate</th>
                                    <th style="width: 20%; text-align: right;">Amount</th>
                                    <th style="width: 50px;"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="item-row">
                                    <td>
                                        <select name="items[0][item_id]" class="form-select item-selector" required>
                                            <option value="">Select or type item</option>
                                            @foreach($items as $item)
                                                <option value="{{ $item->id }}" data-price="{{ $item->sales_price }}">{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="items[0][name]" class="item-name-input">
                                    </td>
                                    <td><input type="number" name="items[0][quantity]" class="form-control qty-input text-center" step="0.01" min="0.01" value="1" required></td>
                                    <td><input type="number" name="items[0][rate]" class="form-control rate-input text-end" step="0.01" min="0" value="0.00" required></td>
                                    <td><input type="text" name="items[0][amount]" class="form-control amount-input bg-light text-end" readonly value="0.00"></td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-link text-danger p-0 remove-row" style="visibility: hidden;"><i class="fas fa-trash"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Section 5 & 6: Automation & Notes -->
                    <div class="row mt-4 pt-4 border-top">
                        <div class="col-md-6 mb-3">
                            <div class="form-section-title small text-muted">Automation Settings</div>
                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input" type="checkbox" name="auto_send" id="auto_send" value="1" checked>
                                <label class="form-check-label fw-bold" for="auto_send">Auto Send Invoice</label>
                                <div class="form-text">Automatically email the generated invoice to the customer.</div>
                            </div>
                            <div class="mb-3">
                                <label for="payment_terms" class="form-label text-muted small fw-bold">Payment Terms</label>
                                <select name="payment_terms" id="payment_terms" class="form-select">
                                    <option value="Due on Receipt">Due on Receipt</option>
                                    <option value="Net 15">Net 15</option>
                                    <option value="Net 30">Net 30</option>
                                    <option value="Net 45">Net 45</option>
                                    <option value="Net 60">Net 60</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="form-section-title small text-muted">Notes</div>
                            <div class="mb-3">
                                <label for="customer_notes" class="form-label text-muted small fw-bold">Customer Notes</label>
                                <textarea name="customer_notes" id="customer_notes" class="form-control" rows="2" placeholder="Notes that will appear on the invoice"></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="terms_conditions" class="form-label text-muted small fw-bold">Terms & Conditions</label>
                                <textarea name="terms_conditions" id="terms_conditions" class="form-control" rows="2" placeholder="Terms and conditions for this invoice"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-4 mb-5">
                <button type="submit" name="status" value="active" class="btn btn-primary px-4 me-2">Save & Activate</button>
                <button type="submit" name="status" value="draft" class="btn btn-outline-secondary px-4 me-2">Save as Draft</button>
                <a href="{{ route('recurring-invoices.index') }}" class="btn btn-link text-muted px-4">Cancel</a>
            </div>
        </div>

        <!-- Right Column: Calculation Summary (Sticky) -->
        <div class="col-lg-4">
            <div class="sticky-summary">
                <div class="card stat-card border-0 calculation-summary-card shadow-sm">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-4">Final Summary</h5>
                        
                        <div class="d-flex justify-content-between mb-3">
                            <span class="text-muted">Subtotal</span>
                            <span class="fw-bold" id="sub-total-display">{{ getCurrencySymbol() }} 0.00</span>
                            <input type="hidden" name="subtotal" id="subtotal_input" value="0">
                        </div>

                        <div class="mb-3">
                            <label for="tax_selector" class="form-label text-muted small fw-bold">Tax</label>
                            <select id="tax_selector" class="form-select form-select-sm">
                                <option value="0" 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>
                            <div class="d-flex justify-content-between mt-2 small">
                                <span class="text-muted">Tax Amount</span>
                                <span id="tax-amount-display">{{ getCurrencySymbol() }} 0.00</span>
                                <input type="hidden" name="tax_amount" id="tax_amount_input" value="0">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="discount" class="form-label text-muted small fw-bold">Discount ({{ getCurrencySymbol() }})</label>
                            <input type="number" name="discount" id="discount" class="form-control form-control-sm text-end" value="0" step="0.01" min="0">
                        </div>

                        <div class="mb-3">
                            <label for="adjustment" class="form-label text-muted small fw-bold">Adjustment ({{ getCurrencySymbol() }})</label>
                            <input type="number" name="adjustment" id="adjustment" class="form-control form-control-sm text-end" value="0" step="0.01">
                            <div class="form-text extra-small" style="font-size: 0.7rem;">Use minus (-) for deduction</div>
                        </div>

                        <hr class="my-4">

                        <div class="d-flex justify-content-between align-items-center mb-0">
                            <span class="h6 fw-bold mb-0">Total Amount ({{ getCurrencySymbol() }})</span>
                            <span class="h4 fw-bold text-primary mb-0" id="total-amount-display">0.00</span>
                            <input type="hidden" name="total_amount" id="total_amount_input" value="0">
                        </div>
                    </div>
                </div>

                <div class="card stat-card border-0 mt-3 bg-light-primary">
                    <div class="card-body p-3 small text-center">
                        <i class="fas fa-magic me-2"></i> This profile will generate its first invoice on <span id="hint-next-run" class="fw-bold">-</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tableBody = document.querySelector('#items-table tbody');
    const addRowBtn = document.querySelector('#add-row');
    const subTotalDisplay = document.querySelector('#sub-total-display');
    const subTotalInput = document.querySelector('#subtotal_input');
    const taxSelector = document.querySelector('#tax_selector');
    const taxAmountDisplay = document.querySelector('#tax-amount-display');
    const taxAmountInput = document.querySelector('#tax_amount_input');
    const discountInput = document.querySelector('#discount');
    const adjustmentInput = document.querySelector('#adjustment');
    const totalAmountDisplay = document.querySelector('#total-amount-display');
    const totalAmountInput = document.querySelector('#total_amount_input');
    
    // Scheduling inputs
    const startDateInput = document.querySelector('#start_date');
    const frequencySelect = document.querySelector('#frequency');
    const intervalInput = document.querySelector('#interval_value');
    const displayNextRun = document.querySelector('#display-next-run');
    const hintNextRun = document.querySelector('#hint-next-run');
    const nextRunDateInput = document.querySelector('#next_run_date_input');

    let rowCount = 1;

    function calculateTotal() {
        let subtotal = 0;
        document.querySelectorAll('.amount-input').forEach(input => {
            subtotal += parseFloat(input.value) || 0;
        });

        const taxRate = parseFloat(taxSelector.options[taxSelector.selectedIndex].getAttribute('data-rate')) || 0;
        const taxAmount = (subtotal * taxRate) / 100;
        const discount = parseFloat(discountInput.value) || 0;
        const adjustment = parseFloat(adjustmentInput.value) || 0;
        
        const total = subtotal + taxAmount - discount + adjustment;

        const currencySymbol = '{{ getCurrencySymbol() }} ';
        subTotalDisplay.textContent = currencySymbol + subtotal.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        subTotalInput.value = subtotal.toFixed(2);
        
        taxAmountDisplay.textContent = currencySymbol + taxAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        taxAmountInput.value = taxAmount.toFixed(2);
        
        totalAmountDisplay.textContent = total.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        totalAmountInput.value = total.toFixed(2);
    }

    function calculateRowAmount(row) {
        const qty = parseFloat(row.querySelector('.qty-input').value) || 0;
        const rate = parseFloat(row.querySelector('.rate-input').value) || 0;
        const amount = qty * rate;
        row.querySelector('.amount-input').value = amount.toFixed(2);
        calculateTotal();
    }

    function updateNextRunDate() {
        const start = startDateInput.value;
        if (!start) {
            displayNextRun.textContent = hintNextRun.textContent = '-';
            return;
        }
        
        // Simplifying: actual scheduling logic is on backend, 
        // here we show the first run date (which is usually start_date)
        const date = new Date(start);
        const formatted = date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
        displayNextRun.textContent = hintNextRun.textContent = formatted;
        nextRunDateInput.value = start;
    }

    addRowBtn.addEventListener('click', () => {
        const row = document.createElement('tr');
        row.className = 'item-row';
        row.innerHTML = `
            <td>
                <select name="items[${rowCount}][item_id]" class="form-select item-selector" required>
                    <option value="">Select or type item</option>
                    @foreach($items as $item)
                        <option value="{{ $item->id }}" data-price="{{ $item->sales_price }}">{{ $item->name }}</option>
                    @endforeach
                </select>
                <input type="hidden" name="items[${rowCount}][name]" class="item-name-input">
            </td>
            <td><input type="number" name="items[${rowCount}][quantity]" class="form-control qty-input text-center" step="0.01" min="0.01" value="1" required></td>
            <td><input type="number" name="items[${rowCount}][rate]" class="form-control rate-input text-end" step="0.01" min="0" value="0.00" required></td>
            <td><input type="text" name="items[${rowCount}][amount]" class="form-control amount-input bg-light text-end" readonly value="0.00"></td>
            <td class="text-center"><button type="button" class="btn btn-link text-danger p-0 remove-row"><i class="fas fa-trash"></i></button></td>
        `;
        tableBody.appendChild(row);
        rowCount++;
        
        // Show remove button on first row if more than 1 row
        if (document.querySelectorAll('.item-row').length > 1) {
            document.querySelector('.remove-row').style.visibility = 'visible';
        }
    });

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

    tableBody.addEventListener('input', (e) => {
        if (e.target.classList.contains('qty-input') || e.target.classList.contains('rate-input')) {
            calculateRowAmount(e.target.closest('tr'));
        }
    });

    tableBody.addEventListener('click', (e) => {
        if (e.target.closest('.remove-row')) {
            const rows = document.querySelectorAll('.item-row');
            if (rows.length > 1) {
                e.target.closest('tr').remove();
                calculateTotal();
                if (document.querySelectorAll('.item-row').length === 1) {
                    document.querySelector('.remove-row').style.visibility = 'hidden';
                }
            }
        }
    });

    taxSelector.addEventListener('change', calculateTotal);
    discountInput.addEventListener('input', calculateTotal);
    adjustmentInput.addEventListener('input', calculateTotal);
    startDateInput.addEventListener('change', updateNextRunDate);
    
    // Initial calls
    updateNextRunDate();
});
</script>
@endpush
@endsection