@extends('layouts.portal')

@section('title', 'Create Invoice - Will #{{ $will->id }}')
@section('page_title', 'Create Invoice')
@section('page_subtitle', 'For Will #{{ $will->id }} - {{ $will->client->full_name }}')

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

@section('content')
    <div class="max-w-4xl mx-auto">
        <div class="bg-white rounded-xl shadow-lg p-8">
            <div class="mb-6">
                <a href="{{ route('admin.wills.overview', $will) }}" class="inline-flex items-center text-gray-600 hover:text-gray-800">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    Back to Will Overview
                </a>
            </div>

            <h2 class="text-2xl font-bold text-gray-800 mb-6">Create Invoice for Will #{{ $will->id }}</h2>

            <div class="bg-gray-50 rounded-lg p-4 mb-6">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <p class="text-sm text-gray-500">Client</p>
                        <p class="font-semibold text-gray-800">{{ $will->client->full_name }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Email</p>
                        <p class="font-semibold text-gray-800">{{ $will->client->email }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Will Type</p>
                        <p class="font-semibold text-gray-800">{{ $will->is_joint ? 'Joint Will' : ucfirst($will->will_type) }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Package</p>
                        <p class="font-semibold text-gray-800">{{ $will->package ? $will->package->name : 'Not assigned' }}</p>
                    </div>
                    @if($will->package)
                        <div>
                            <p class="text-sm text-gray-500">Package Price</p>
                            <p class="font-bold text-green-600 text-lg">RM{{ number_format($will->package->price, 2) }}</p>
                        </div>
                    @endif
                </div>
            </div>

            <form action="{{ route('admin.wills.invoice.store', $will) }}" method="POST">
                @csrf

                <div class="space-y-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Invoice Type</label>
                        <select name="type" required class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <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)</label>
                        <input type="number" name="amount" step="0.01" min="0" required
                               value="{{ $will->package ? $will->package->price : '' }}"
                               class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                               placeholder="0.00"
                               onchange="calculateTotal()">
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Discount Amount (RM)</label>
                            <input type="number" name="discount" step="0.01" min="0" value="0"
                                   class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                   placeholder="0.00"
                                   onchange="calculateTotal()">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Discount Percentage (%)</label>
                            <input type="number" name="discount_percentage" step="0.01" min="0" max="100" value="0"
                                   class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                   placeholder="0.00"
                                   onchange="calculateDiscountFromPercentage()">
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Tax Amount (RM)</label>
                            <input type="number" name="tax" step="0.01" min="0" value="0"
                                   class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                   placeholder="0.00"
                                   onchange="calculateTotal()">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Tax Percentage (%)</label>
                            <input type="number" name="tax_percentage" step="0.01" min="0" max="100" value="0"
                                   class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                   placeholder="0.00"
                                   onchange="calculateTaxFromPercentage()">
                        </div>
                    </div>

                    <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                        <div class="space-y-2">
                            <div class="flex justify-between items-center">
                                <span class="text-sm font-medium text-gray-700">Subtotal:</span>
                                <span id="subtotalAmount" class="text-lg font-semibold text-gray-800">RM 0.00</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm font-medium text-gray-700">Discount:</span>
                                <span id="discountDisplay" class="text-lg font-semibold text-red-600">- RM 0.00</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm font-medium text-gray-700">Tax:</span>
                                <span id="taxDisplay" class="text-lg font-semibold text-blue-600">+ RM 0.00</span>
                            </div>
                            <hr class="border-green-200">
                            <div class="flex justify-between items-center">
                                <span class="text-sm font-bold text-gray-800">Total Amount:</span>
                                <span id="totalAmount" class="text-2xl font-bold text-green-600">RM 0.00</span>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Invoice Date</label>
                            <x-date-picker
                    name="invoice_date"
                    value=""
                    class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    required
                />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Due Date</label>
                            <x-date-picker
                    name="due_date"
                    value=""
                    class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    required
                />
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                        <textarea name="notes" rows="3"
                                  class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                  placeholder="Any additional notes..."></textarea>
                    </div>
                </div>

                <div class="mt-8 flex justify-end gap-4">
                    <a href="{{ route('admin.wills.overview', $will) }}" class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                        Cancel
                    </a>
                    <button type="submit" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                        Create Invoice
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function calculateTotal() {
            const amount = parseFloat(document.querySelector('input[name="amount"]').value) || 0;
            const discount = parseFloat(document.querySelector('input[name="discount"]').value) || 0;
            const tax = parseFloat(document.querySelector('input[name="tax"]').value) || 0;

            const total = amount - discount + tax;

            // Update breakdown display
            document.getElementById('subtotalAmount').textContent = 'RM ' + amount.toFixed(2);
            document.getElementById('discountDisplay').textContent = '- RM ' + discount.toFixed(2);
            document.getElementById('taxDisplay').textContent = '+ RM ' + tax.toFixed(2);
            document.getElementById('totalAmount').textContent = 'RM ' + total.toFixed(2);
        }

        function calculateDiscountFromPercentage() {
            const amount = parseFloat(document.querySelector('input[name="amount"]').value) || 0;
            const discountPercentage = parseFloat(document.querySelector('input[name="discount_percentage"]').value) || 0;

            const discountAmount = (amount * discountPercentage) / 100;
            document.querySelector('input[name="discount"]').value = discountAmount.toFixed(2);
            calculateTotal();
        }

        function calculateTaxFromPercentage() {
            const amount = parseFloat(document.querySelector('input[name="amount"]').value) || 0;
            const discount = parseFloat(document.querySelector('input[name="discount"]').value) || 0;
            const taxPercentage = parseFloat(document.querySelector('input[name="tax_percentage"]').value) || 0;

            const taxableAmount = amount - discount;
            const taxAmount = (taxableAmount * taxPercentage) / 100;
            document.querySelector('input[name="tax"]').value = taxAmount.toFixed(2);
            calculateTotal();
        }

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