@extends('layouts.app')

@section('title', 'Edit ' . ($quote->status === 'paid' ? 'Invoice ' : 'Quote ') . $quote->quote_number . ' - Lektrik')

@section('content')
<div class="max-w-2xl mx-auto">
    <!-- Edit Form -->
    <form action="{{ route('quotes.update', $quote) }}" method="POST" class="space-y-6">
        @csrf
        @method('PATCH')

        <!-- Client Information (Read-only) -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 transition-colors duration-200">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                <i class="fas fa-user mr-2 text-primary dark:text-blue-400"></i>Client Information
            </h2>
            <div class="bg-gray-50 dark:bg-gray-700 rounded-md p-4 transition-colors duration-200">
                <div class="text-sm">
                    <p class="font-medium text-gray-900 dark:text-white">{{ $quote->client->name }}</p>
                    @if($quote->client->email)
                        <p class="text-gray-600 dark:text-gray-400">{{ $quote->client->email }}</p>
                    @endif
                    @if($quote->client->phone)
                        <p class="text-gray-600 dark:text-gray-400">{{ $quote->client->phone }}</p>
                    @endif
                </div>
            </div>
            <input type="hidden" name="client_id" value="{{ $quote->client_id }}">
        </div>

        <!-- Quote Status -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 transition-colors duration-200">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                <i class="fas fa-clipboard-check mr-2 text-primary dark:text-blue-400"></i>Quote Status
            </h2>

            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Current Status</label>
                    <div class="space-y-2">
                        <label class="flex items-center">
                            <input type="radio" name="status" value="pending" 
                                   {{ $quote->status === 'pending' ? 'checked' : '' }}
                                   class="text-primary focus:ring-primary border-gray-300 dark:border-gray-600 dark:bg-gray-700 mr-3">
                            <div class="flex items-center">
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-orange-100 dark:bg-orange-800 text-orange-800 dark:text-orange-200 mr-2">
                                    Pending
                                </span>
                                <span class="text-sm text-gray-600 dark:text-gray-400">Work completed, awaiting payment</span>
                            </div>
                        </label>
                        
                        <label class="flex items-center">
                            <input type="radio" name="status" value="paid"
                                   {{ $quote->status === 'paid' ? 'checked' : '' }}
                                   class="text-primary focus:ring-primary border-gray-300 dark:border-gray-600 dark:bg-gray-700 mr-3"
                                   onchange="togglePaidDate()">
                            <div class="flex items-center">
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 mr-2">
                                    Paid
                                </span>
                                <span class="text-sm text-gray-600 dark:text-gray-400">Payment received</span>
                            </div>
                        </label>
                    </div>
                    @error('status')
                        <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Paid Date (shown when status is paid) -->
                <div id="paid_date_field" class="{{ $quote->status === 'paid' ? '' : 'hidden' }}">
                    <label for="paid_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Date Paid <span class="text-red-500">*</span>
                    </label>
                    <input type="date" name="paid_date" id="paid_date" 
                           value="{{ $quote->paid_date ? $quote->paid_date->format('Y-m-d') : now()->format('Y-m-d') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                    @error('paid_date')
                        <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Quote Details -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 transition-colors duration-200">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                <i class="fas fa-file-alt mr-2 text-primary dark:text-blue-400"></i>Quote Details
            </h2>

            <div class="space-y-4">
                <div>
                    <label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Notes</label>
                    <textarea name="notes" id="notes" rows="4"
                              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                              placeholder="Any additional notes...">{{ $quote->notes }}</textarea>
                    @error('notes')
                        <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Quote Total (Read-only) -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 transition-colors duration-200">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                <i class="fas fa-calculator mr-2 text-primary dark:text-blue-400"></i>Quote Total
            </h2>
            <div class="bg-gray-50 dark:bg-gray-700 rounded-md p-4 transition-colors duration-200">
                <div class="flex justify-between items-center text-lg font-bold">
                    <span class="text-gray-900 dark:text-white">Total Amount:</span>
                    <span class="text-primary dark:text-blue-400">R{{ number_format($quote->total, 2) }}</span>
                </div>
                <div class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                    Subtotal: R{{ number_format($quote->subtotal, 2) }} + VAT: R{{ number_format($quote->vat_amount, 2) }}
                </div>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="flex flex-col sm:flex-row gap-4 justify-end">
            <a href="{{ route('quotes.show', $quote) }}" class="w-full sm:w-auto px-6 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-center">
                Cancel
            </a>
            <button type="submit" class="w-full sm:w-auto bg-primary text-white px-6 py-2 rounded-md hover:bg-blue-600 transition-colors">
                <i class="fas fa-save mr-2"></i>Update Quote
            </button>
        </div>
    </form>
</div>

<script>
function togglePaidDate() {
    const paidRadio = document.querySelector('input[name="status"][value="paid"]');
    const paidDateField = document.getElementById('paid_date_field');
    
    if (paidRadio.checked) {
        paidDateField.classList.remove('hidden');
    } else {
        paidDateField.classList.add('hidden');
    }
}

// Also listen for the pending radio button
document.querySelector('input[name="status"][value="pending"]').addEventListener('change', function() {
    if (this.checked) {
        document.getElementById('paid_date_field').classList.add('hidden');
    }
});
</script>
@endsection