@extends('layouts.app')

@section('title', 'Configuration - Lektrik')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <!-- Page Header -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 transition-colors duration-200">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
                    <i class="fas fa-cog mr-2 text-primary dark:text-blue-400"></i>Configuration
                </h1>
                <p class="text-gray-600 dark:text-gray-400 mt-1">Manage your company settings and branding</p>
            </div>
        </div>
    </div>

    <form action="{{ route('configuration.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
        @csrf
        @method('PUT')

        <!-- Company Information -->
        <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-building mr-2 text-primary dark:text-blue-400"></i>Company Information
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="company_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Company Name <span class="text-red-500">*</span></label>
                    <input type="text" name="company_name" id="company_name" required 
                           value="{{ old('company_name', $companySetting->company_name ?? 'Lektrik') }}"
                           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('company_name')
                        <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="registration_number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Registration Number</label>
                    <input type="text" name="registration_number" id="registration_number"
                           value="{{ old('registration_number', $companySetting->registration_number) }}"
                           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('registration_number')
                        <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="vat_number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">VAT Number</label>
                    <input type="text" name="vat_number" id="vat_number"
                           value="{{ old('vat_number', $companySetting->vat_number) }}"
                           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('vat_number')
                        <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="company_email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Company Email</label>
                    <input type="email" name="company_email" id="company_email"
                           value="{{ old('company_email', $companySetting->company_email) }}"
                           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('company_email')
                        <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="company_phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Company Phone</label>
                    <input type="text" name="company_phone" id="company_phone"
                           value="{{ old('company_phone', $companySetting->company_phone) }}"
                           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('company_phone')
                        <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="md:col-span-2">
                    <label for="company_address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Company Address</label>
                    <textarea name="company_address" id="company_address" rows="3"
                              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">{{ old('company_address', $companySetting->company_address) }}</textarea>
                    @error('company_address')
                        <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Company Logo -->
        <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-image mr-2 text-primary dark:text-blue-400"></i>Company Logo
            </h2>

            <div class="space-y-4">
                @if($companySetting->logo_path)
                    <div class="flex items-center space-x-4">
                        <img src="{{ Storage::url($companySetting->logo_path) }}" alt="Company Logo" class="h-16 w-auto rounded-md border border-gray-300 dark:border-gray-600">
                        <div>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Current logo</p>
                            <form action="{{ route('configuration.removeLogo') }}" method="POST" class="inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 text-sm" onclick="return confirm('Are you sure you want to remove the logo?')">
                                    <i class="fas fa-trash mr-1"></i>Remove Logo
                                </button>
                            </form>
                        </div>
                    </div>
                @endif

                <div>
                    <label for="logo" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Upload New Logo</label>
                    <input type="file" name="logo" id="logo" accept="image/*"
                           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">
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Supported formats: JPG, PNG, GIF. Max size: 2MB</p>
                    @error('logo')
                        <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Banking 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-university mr-2 text-primary dark:text-blue-400"></i>South African Banking Details
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="bank_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Bank Name</label>
                    <select name="bank_name" id="bank_name"
                            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">
                        <option value="">Select Bank</option>
                        <option value="ABSA Bank" {{ old('bank_name', $companySetting->bank_name) == 'ABSA Bank' ? 'selected' : '' }}>ABSA Bank</option>
                        <option value="Standard Bank" {{ old('bank_name', $companySetting->bank_name) == 'Standard Bank' ? 'selected' : '' }}>Standard Bank</option>
                        <option value="First National Bank (FNB)" {{ old('bank_name', $companySetting->bank_name) == 'First National Bank (FNB)' ? 'selected' : '' }}>First National Bank (FNB)</option>
                        <option value="Nedbank" {{ old('bank_name', $companySetting->bank_name) == 'Nedbank' ? 'selected' : '' }}>Nedbank</option>
                        <option value="Capitec Bank" {{ old('bank_name', $companySetting->bank_name) == 'Capitec Bank' ? 'selected' : '' }}>Capitec Bank</option>
                        <option value="Discovery Bank" {{ old('bank_name', $companySetting->bank_name) == 'Discovery Bank' ? 'selected' : '' }}>Discovery Bank</option>
                        <option value="African Bank" {{ old('bank_name', $companySetting->bank_name) == 'African Bank' ? 'selected' : '' }}>African Bank</option>
                        <option value="Investec Bank" {{ old('bank_name', $companySetting->bank_name) == 'Investec Bank' ? 'selected' : '' }}>Investec Bank</option>
                        <option value="Other" {{ old('bank_name', $companySetting->bank_name) == 'Other' ? 'selected' : '' }}>Other</option>
                    </select>
                    @error('bank_name')
                        <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="account_holder" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Account Holder Name</label>
                    <input type="text" name="account_holder" id="account_holder"
                           value="{{ old('account_holder', $companySetting->account_holder) }}"
                           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('account_holder')
                        <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="account_number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Account Number</label>
                    <input type="text" name="account_number" id="account_number"
                           value="{{ old('account_number', $companySetting->account_number) }}"
                           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('account_number')
                        <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="branch_code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Branch Code</label>
                    <input type="text" name="branch_code" id="branch_code"
                           value="{{ old('branch_code', $companySetting->branch_code) }}"
                           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('branch_code')
                        <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="account_type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Account Type</label>
                    <select name="account_type" id="account_type"
                            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">
                        <option value="">Select Account Type</option>
                        <option value="Current Account" {{ old('account_type', $companySetting->account_type) == 'Current Account' ? 'selected' : '' }}>Current Account</option>
                        <option value="Savings Account" {{ old('account_type', $companySetting->account_type) == 'Savings Account' ? 'selected' : '' }}>Savings Account</option>
                        <option value="Business Account" {{ old('account_type', $companySetting->account_type) == 'Business Account' ? 'selected' : '' }}>Business Account</option>
                    </select>
                    @error('account_type')
                        <p class="text-red-500 dark:text-red-400 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/30 rounded-md">
                <p class="text-sm text-blue-800 dark:text-blue-200">
                    <i class="fas fa-info-circle mr-2"></i>
                    <strong>Note:</strong> These banking details will appear on your quotes and invoices for client payments.
                </p>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="flex flex-col sm:flex-row gap-4 justify-end">
            <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>Save Configuration
            </button>
        </div>
    </form>
</div>
@endsection