@extends('layouts.portal')

@section('title', 'Create Invoice')
@section('page_title', 'Create New Invoice')
@section('page_subtitle', 'Generate invoice for client')

@section('sidebar')
    @include('admin.partials.sidebar', ['active' => 'invoices'])
@endsection

@section('content')
    <div class="max-w-2xl mx-auto">
        <form action="{{ route('admin.invoices.store') }}" method="POST" class="bg-white rounded-xl shadow-sm p-8">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Client <span class="text-red-500">*</span></label>
                    <select name="client_id" required 
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all">
                        <option value="">Select client</option>
                        @foreach($clients as $client)
                            <option value="{{ $client->id }}">{{ $client->full_name }} ({{ $client->email }})</option>
                        @endforeach
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Package (Optional)</label>
                    <select name="package_id" 
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all">
                        <option value="">Select package</option>
                        @foreach($packages as $package)
                            <option value="{{ $package->id }}" data-price="{{ $package->price }}">{{ $package->name }} - RM{{ number_format($package->price, 2) }}</option>
                        @endforeach
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Invoice Type <span class="text-red-500">*</span></label>
                    <select name="type" required 
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all">
                        <option value="">Select type</option>
                        <option value="will_writing">Will Writing Fee</option>
                        <option value="trustee_fee">Trustee Fee</option>
                        <option value="storage_fee">Storage Fee</option>
                        <option value="annual_safekeeping">Annual Safekeeping</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Amount (RM) <span class="text-red-500">*</span></label>
                    <input type="number" name="amount" id="amount" step="0.01" min="0" required 
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                           placeholder="0.00">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Discount (RM)</label>
                    <input type="number" name="discount" step="0.01" min="0" value="0"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                           placeholder="0.00">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Tax (RM)</label>
                    <input type="number" name="tax" step="0.01" min="0" value="0"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                           placeholder="0.00">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Invoice Date <span class="text-red-500">*</span></label>
                    <x-date-picker
                    name="invoice_date"
                    value="{{ date("
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                    required
                />
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Due Date <span class="text-red-500">*</span></label>
                    <x-date-picker
                    name="due_date"
                    value="{{ date("
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                    required
                />
                </div>
                
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                    <textarea name="notes" rows="3" 
                              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                              placeholder="Additional notes..."></textarea>
                </div>
            </div>
            
            <div class="mt-8 flex justify-between">
                <a href="{{ route('admin.invoices') }}" class="px-8 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 font-medium">
                    <i class="fas fa-arrow-left mr-2"></i> Back
                </a>
                <button type="submit" class="octowill-btn text-white px-8 py-3 rounded-lg font-medium inline-flex items-center">
                    <i class="fas fa-save mr-2"></i> Create Invoice
                </button>
            </div>
        </form>
    </div>

    <script>
        document.querySelector('select[name="package_id"]').addEventListener('change', function() {
            const selected = this.options[this.selectedIndex];
            const price = selected.getAttribute('data-price');
            if (price) {
                document.getElementById('amount').value = price;
            }
        });
    </script>
@endsection