@extends('layouts.main')

@section('title', 'Settings')

@section('content')
<div class="mb-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Settings</h2>
    <p class="text-gray-500 dark:text-gray-400">Manage your company information and preferences</p>
</div>

@if(session('success'))
    <div class="bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400 px-4 py-3 rounded-lg mb-4">
        {{ session('success') }}
    </div>
@endif

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Company Information -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">
            <i class="fas fa-building mr-2 text-indigo-600 dark:text-indigo-400"></i>Company Information
        </h3>
        
        <form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Company Name</label>
                    <input type="text" name="company_name" value="{{ old('company_name', $settings->company_name ?? '') }}" 
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
                    <input type="email" name="company_email" value="{{ old('company_email', $settings->company_email ?? '') }}" 
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone</label>
                    <input type="text" name="company_phone" value="{{ old('company_phone', $settings->company_phone ?? '') }}" 
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label>
                    <textarea name="company_address" rows="3" 
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">{{ old('company_address', $settings->company_address ?? '') }}</textarea>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tax Number / Registration</label>
                    <input type="text" name="tax_number" value="{{ old('tax_number', $settings->tax_number ?? '') }}" 
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Company Logo</label>
                    @if($settings && $settings->company_logo)
                        <div class="mb-2">
                            <img src="{{ asset('storage/' . $settings->company_logo) }}" alt="Logo" class="h-20 object-contain">
                        </div>
                    @endif
                    <input type="file" name="company_logo" accept="image/*" 
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                </div>
            </div>
            
            <button type="submit" class="mt-4 bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg">
                <i class="fas fa-save mr-2"></i>Save Company Info
            </button>
        </form>
    </div>
    
    <!-- Document Settings -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">
            <i class="fas fa-file-alt mr-2 text-indigo-600 dark:text-indigo-400"></i>Document Settings
        </h3>
        
        <form action="{{ route('settings.update') }}" method="POST">
            @csrf
            
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Invoice Prefix</label>
                    <input type="text" name="invoice_prefix" value="{{ old('invoice_prefix', $settings->invoice_prefix ?? 'INV') }}" 
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Quotation Prefix</label>
                    <input type="text" name="quotation_prefix" value="{{ old('quotation_prefix', $settings->quotation_prefix ?? 'QT') }}" 
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                </div>
            </div>
            
            <button type="submit" class="mt-4 bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg">
                <i class="fas fa-save mr-2"></i>Save Document Settings
            </button>
        </form>
    </div>
</div>

<!-- Tax Rates -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mt-6">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">
        <i class="fas fa-percent mr-2 text-indigo-600 dark:text-indigo-400"></i>Tax Rates
    </h3>
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Add New Tax Rate -->
        <div>
            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Add New Tax Rate</h4>
            <form action="{{ route('settings.tax-rates.store') }}" method="POST">
                @csrf
                <div class="flex gap-2">
                    <input type="text" name="name" placeholder="e.g., VAT 10%" required 
                        class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    <input type="number" name="rate" placeholder="Rate %" step="0.01" min="0" max="100" required 
                        class="w-24 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </form>
        </div>
        
        <!-- Existing Tax Rates -->
        <div>
            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Existing Tax Rates</h4>
            @if($taxRates->count() > 0)
                <div class="space-y-2">
                    @foreach($taxRates as $taxRate)
                        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <div class="flex items-center gap-2">
                                <span class="font-medium text-gray-800 dark:text-white">{{ $taxRate->name }}</span>
                                <span class="text-gray-600 dark:text-gray-400">({{ number_format($taxRate->rate, 2) }}%)</span>
                                @if(!$taxRate->is_active)
                                    <span class="text-xs bg-gray-200 dark:bg-gray-600 px-2 py-0.5 rounded">Inactive</span>
                                @endif
                            </div>
                            <div class="flex gap-2">
                                <form action="{{ route('settings.tax-rates.toggle', $taxRate) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
                                        <i class="fas fa-toggle-{{ $taxRate->is_active ? 'on' : 'off' }}"></i>
                                    </button>
                                </form>
                                <form action="{{ route('settings.tax-rates.destroy', $taxRate) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:text-red-800 dark:hover:text-red-400" onclick="return confirm('Delete this tax rate?')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="text-gray-500 dark:text-gray-400">No tax rates configured</p>
            @endif
        </div>
    </div>
</div>
@endsection