@extends('layouts.admin')

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

@section('page-title', 'Create Recurring Invoice')

@section('content')
<form method="POST" action="{{ route('admin.recurring-invoices.store') }}" class="max-w-3xl mx-auto">
    @csrf

    <div class="bg-white rounded-xl shadow-sm border border-[#e5e7eb] p-6 space-y-6">
        <div>
            <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Name <span class="text-red-500">*</span></label>
            <input type="text" name="name" required value="{{ old('name') }}" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
        </div>

        <div>
            <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Customer <span class="text-red-500">*</span></label>
            <select name="customer_id" required class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
                <option value="">Select a client...</option>
                @foreach($customers as $customer)
                    <option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>{{ $customer->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Frequency <span class="text-red-500">*</span></label>
                <select name="frequency" required class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
                    <option value="daily" {{ old('frequency') == 'daily' ? 'selected' : '' }}>Daily</option>
                    <option value="weekly" {{ old('frequency') == 'weekly' ? 'selected' : '' }}>Weekly</option>
                    <option value="biweekly" {{ old('frequency') == 'biweekly' ? 'selected' : '' }}>Bi-weekly</option>
                    <option value="monthly" {{ old('frequency', 'monthly') == 'monthly' ? 'selected' : '' }}>Monthly</option>
                    <option value="quarterly" {{ old('frequency') == 'quarterly' ? 'selected' : '' }}>Quarterly</option>
                    <option value="semiannually" {{ old('frequency') == 'semiannually' ? 'selected' : '' }}>Semi-annually</option>
                    <option value="annually" {{ old('frequency') == 'annually' ? 'selected' : '' }}>Annually</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Start Date <span class="text-red-500">*</span></label>
                <input type="date" name="start_date" required value="{{ old('start_date', now()->format('Y-m-d')) }}" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">End Date</label>
                <input type="date" name="end_date" value="{{ old('end_date') }}" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Occurrences</label>
                <input type="number" name="occurrences" min="1" value="{{ old('occurrences') }}" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900" placeholder="Leave empty for unlimited">
            </div>
        </div>

        <div class="bg-background-light p-4 rounded-lg">
            <p class="text-sm text-[#617589] mb-4">Invoice Items (same as regular invoice creation)</p>
            <div id="invoice-items-container">
                <!-- Items will be added here -->
            </div>
            <button type="button" onclick="addInvoiceItem()" class="mt-2 px-4 py-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors text-sm">
                Add Item
            </button>
        </div>

        <div class="flex gap-3 pt-4">
            <a href="{{ route('admin.recurring-invoices.index') }}" class="px-6 py-2.5 rounded-lg border border-[#dbe0e6] text-[#617589] font-medium hover:bg-background-light transition-colors">Cancel</a>
            <button type="submit" class="px-8 py-2.5 rounded-lg bg-primary text-white font-bold hover:bg-blue-600 transition-all flex items-center gap-2">
                Create Recurring Invoice <span class="material-symbols-outlined text-lg">save</span>
            </button>
        </div>
    </div>
</form>

<script>
let itemIndex = 0;
function addInvoiceItem() {
    const container = document.getElementById('invoice-items-container');
    const item = document.createElement('div');
    item.className = 'grid grid-cols-4 gap-4 mb-4';
    item.innerHTML = `
        <input type="text" name="invoice_data[items][${itemIndex}][description]" required placeholder="Description" class="h-10 rounded-lg border border-[#dbe0e6] px-3 text-sm">
        <input type="number" name="invoice_data[items][${itemIndex}][quantity]" required min="0.01" step="0.01" placeholder="Qty" class="h-10 rounded-lg border border-[#dbe0e6] px-3 text-sm">
        <input type="number" name="invoice_data[items][${itemIndex}][unit_price]" required min="0" step="0.01" placeholder="Price" class="h-10 rounded-lg border border-[#dbe0e6] px-3 text-sm">
        <input type="number" name="invoice_data[items][${itemIndex}][tax_rate]" min="0" max="100" step="0.01" placeholder="Tax %" class="h-10 rounded-lg border border-[#dbe0e6] px-3 text-sm">
    `;
    container.appendChild(item);
    itemIndex++;
}
document.addEventListener('DOMContentLoaded', function() {
    addInvoiceItem();
});
</script>
@endsection