@extends('layouts.dashboard')

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

@section('sidebar')
@include('company-admin.partials.sidebar')
@endsection

@section('content')
<div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
    <form action="{{ route('company.invoices.store') }}" method="POST">
        @csrf
        
        <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Invoice Information</h3>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="lease_id" class="block text-sm font-medium text-gray-700 mb-2">Lease (Optional)</label>
                <select name="lease_id" id="lease_id" 
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition duration-200"
                    onchange="loadLeaseData(this.value)">
                    <option value="">Select Lease</option>
                    @foreach($leases ?? [] as $lease)
                    <option value="{{ $lease->id }}" {{ old('lease_id') == $lease->id ? 'selected' : '' }}>
                        {{ $lease->lease_number }} - {{ $lease->property->title ?? 'N/A' }} ({{ $lease->tenant->full_name ?? 'N/A' }})
                    </option>
                    @endforeach
                </select>
                @error('lease_id')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="contract_id" class="block text-sm font-medium text-gray-700 mb-2">Contract (Optional)</label>
                <select name="contract_id" id="contract_id" 
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition duration-200"
                    onchange="loadContractData(this.value)">
                    <option value="">Select Contract</option>
                    @foreach($contracts ?? [] as $contract)
                    <option value="{{ $contract->id }}" {{ old('contract_id', $selectedContract?->id) == $contract->id ? 'selected' : '' }}>
                        {{ $contract->contract_number }} - {{ $contract->property->title ?? 'N/A' }}
                    </option>
                    @endforeach
                </select>
                @error('contract_id')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="property_id" class="block text-sm font-medium text-gray-700 mb-2">Property (Optional)</label>
                <select name="property_id" id="property_id" 
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition duration-200">
                    <option value="">Select Property</option>
                    @foreach($properties as $property)
                    <option value="{{ $property->id }}" {{ old('property_id') == $property->id ? 'selected' : '' }}>
                        {{ $property->title }} - {{ $property->address }}
                    </option>
                    @endforeach
                </select>
                @error('property_id')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="owner_id" class="block text-sm font-medium text-gray-700 mb-2">Owner (Optional)</label>
                <select name="owner_id" id="owner_id" 
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition duration-200">
                    <option value="">Select Owner</option>
                    @foreach($customers as $customer)
                    <option value="{{ $customer->id }}" {{ old('owner_id') == $customer->id ? 'selected' : '' }}>
                        {{ $customer->name }} - {{ $customer->email }}
                    </option>
                    @endforeach
                </select>
                @error('owner_id')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="customer_id" class="block text-sm font-medium text-gray-700 mb-2">Customer (Optional)</label>
                <select name="customer_id" id="customer_id" 
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition duration-200">
                    <option value="">Select Customer</option>
                    @foreach($customers as $customer)
                    <option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>
                        {{ $customer->name }} - {{ $customer->email }}
                    </option>
                    @endforeach
                </select>
                @error('customer_id')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="amount" class="block text-sm font-medium text-gray-700 mb-2">Amount *</label>
                <input type="number" step="0.01" name="amount" id="amount" required value="{{ old('amount') }}" 
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition duration-200"
                    onchange="calculateTotal()">
                @error('amount')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="tax_amount" class="block text-sm font-medium text-gray-700 mb-2">Tax Amount</label>
                <input type="number" step="0.01" name="tax_amount" id="tax_amount" value="{{ old('tax_amount', 0) }}" 
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition duration-200"
                    onchange="calculateTotal()">
                @error('tax_amount')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="total_amount" class="block text-sm font-medium text-gray-700 mb-2">Total Amount</label>
                <input type="text" id="total_amount" readonly value="0.00" 
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg bg-gray-50 text-gray-700 font-semibold">
            </div>

            <div>
                <label for="currency" class="block text-sm font-medium text-gray-700 mb-2">Currency *</label>
                <select name="currency" id="currency" required 
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition duration-200">
                    <option value="TZS" {{ old('currency', 'TZS') == 'TZS' ? 'selected' : '' }}>TZS</option>
                    <option value="USD" {{ old('currency') == 'USD' ? 'selected' : '' }}>USD</option>
                    <option value="EUR" {{ old('currency') == 'EUR' ? 'selected' : '' }}>EUR</option>
                </select>
                @error('currency')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="invoice_date" class="block text-sm font-medium text-gray-700 mb-2">Invoice Date *</label>
                <input type="date" name="invoice_date" id="invoice_date" required value="{{ old('invoice_date', date('Y-m-d')) }}" 
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition duration-200">
                @error('invoice_date')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="due_date" class="block text-sm font-medium text-gray-700 mb-2">Due Date *</label>
                <input type="date" name="due_date" id="due_date" required value="{{ old('due_date', date('Y-m-d', strtotime('+30 days'))) }}" 
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition duration-200">
                @error('due_date')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="invoice_type" class="block text-sm font-medium text-gray-700 mb-2">Invoice Type</label>
                <select name="invoice_type" id="invoice_type" 
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition duration-200">
                    <option value="rent" {{ old('invoice_type', 'rent') == 'rent' ? 'selected' : '' }}>Rent</option>
                    <option value="deposit" {{ old('invoice_type') == 'deposit' ? 'selected' : '' }}>Deposit</option>
                    <option value="utility" {{ old('invoice_type') == 'utility' ? 'selected' : '' }}>Utility</option>
                    <option value="other" {{ old('invoice_type') == 'other' ? 'selected' : '' }}>Other</option>
                </select>
                @error('invoice_type')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="md:col-span-2">
                <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                <textarea name="description" id="description" rows="3" 
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition duration-200">{{ old('description') }}</textarea>
                @error('description')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="md:col-span-2">
                <label for="notes" class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                <textarea name="notes" id="notes" rows="3" 
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition duration-200">{{ old('notes') }}</textarea>
                @error('notes')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="mt-6 flex justify-end space-x-3">
            <a href="{{ route('company.invoices.index') }}" 
               class="px-6 py-2.5 bg-gray-300 text-gray-700 font-semibold rounded-lg hover:bg-gray-400 transition duration-200">
                Cancel
            </a>
            <button type="submit" 
                    class="px-6 py-2.5 bg-gradient-to-r from-amber-600 to-orange-600 text-white font-semibold rounded-lg hover:from-amber-700 hover:to-orange-700 transition duration-200 shadow-lg hover:shadow-xl">
                Create Invoice
            </button>
        </div>
    </form>
</div>

<script>
function calculateTotal() {
    const amount = parseFloat(document.getElementById('amount').value) || 0;
    const tax = parseFloat(document.getElementById('tax_amount').value) || 0;
    const total = amount + tax;
    document.getElementById('total_amount').value = total.toFixed(2);
}

function loadLeaseData(leaseId) {
    if (!leaseId) return;
    
    // You can add AJAX call here to auto-fill fields from lease
    // For now, it's handled server-side
}

function loadContractData(contractId) {
    if (!contractId) return;
    
    // You can add AJAX call here to auto-fill fields from contract
    // For now, it's handled server-side
}

// Calculate total on page load
document.addEventListener('DOMContentLoaded', function() {
    calculateTotal();
});
</script>
@endsection