@extends('layouts.admin')

@section('title', 'General Settings')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">General Settings</h1>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('admin.settings.general.update') }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="form-section">
                <h3 class="form-section-title">Bank Information</h3>
                <div class="form-grid form-grid-2">
                    <div class="form-group">
                        <label for="bank_name" class="form-label">Bank Name</label>
                        <input type="text" id="bank_name" name="bank_name" class="form-input @error('bank_name') is-invalid @enderror" value="{{ old('bank_name', $settings['bank_name']  ?? 'BANKING') }}">
                        @error('bank_name')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="contact_email" class="form-label">Contact Email</label>
                        <input type="email" id="contact_email" name="contact_email" class="form-input @error('contact_email') is-invalid @enderror" value="{{ old('contact_email', $settings['contact_email']  ?? '') }}">
                        @error('contact_email')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="phone" class="form-label">Phone Number</label>
                        <input type="tel" id="phone" name="phone" class="form-input @error('phone') is-invalid @enderror" value="{{ old('phone', $settings['phone']  ?? '') }}">
                        @error('phone')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="currency" class="form-label">Currency</label>
                        <select id="currency" name="currency" class="form-select @error('currency') is-invalid @enderror" onchange="guessCurrencySymbol()">
                            <option value="NGN" {{ old('currency', $settings['currency']  ?? 'NGN') === 'NGN' ? 'selected' : '' }}>NGN (₦)</option>
                            <option value="USD" {{ old('currency', $settings['currency']  ?? '') === 'USD' ? 'selected' : '' }}>USD ($)</option>
                            <option value="GBP" {{ old('currency', $settings['currency']  ?? '') === 'GBP' ? 'selected' : '' }}>GBP (£)</option>
                            <option value="EUR" {{ old('currency', $settings['currency']  ?? '') === 'EUR' ? 'selected' : '' }}>EUR (€)</option>
                        </select>
                        @error('currency')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="currency_symbol" class="form-label">Currency Symbol</label>
                        <input type="text" id="currency_symbol" name="currency_symbol" class="form-input @error('currency_symbol') is-invalid @enderror" value="{{ old('currency_symbol', $settings['currency_symbol']  ?? (($settings['currency'] ?? 'NGN') === 'NGN' ? '₦' : '$')) }}" maxlength="8">
                        <span class="form-help">Displayed next to amounts across the site.</span>
                        @error('currency_symbol')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group" style="grid-column: span 2;">
                        <label for="address" class="form-label">Address</label>
                        <input type="text" id="address" name="address" class="form-input @error('address') is-invalid @enderror" value="{{ old('address', $settings['address']  ?? '') }}">
                        @error('address')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="timezone" class="form-label">Timezone</label>
                        <select id="timezone" name="timezone" class="form-select @error('timezone') is-invalid @enderror">
                            @php($timezones = ['Africa/Lagos', 'Africa/Accra', 'Africa/Nairobi', 'Africa/Johannesburg', 'UTC', 'America/New_York', 'America/Chicago', 'America/Los_Angeles', 'Europe/London', 'Europe/Paris', 'Asia/Dubai', 'Asia/Tokyo'])
                            @foreach($timezones as $tz)
                            <option value="{{ $tz }}" {{ old('timezone', $settings['timezone']  ?? 'Africa/Lagos') === $tz ? 'selected' : '' }}>{{ $tz }}</option>
                            @endforeach
                        </select>
                        @error('timezone')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="form-section" style="margin-top: 1.5rem;">
                <h3 class="form-section-title">Branding</h3>
                <div class="form-grid form-grid-2">
                    <div class="form-group">
                        <label for="logo" class="form-label">Logo</label>
                        <input type="file" id="logo" name="logo" class="form-input" accept="image/*">
                        @if($settings['logo']  ?? null)
                        <div style="margin-top: 0.5rem;">
                            <img src="{{ asset('storage/' . $settings['logo']) }}" alt="Current Logo" style="max-height: 40px;">
                        </div>
                        @endif
                    </div>
                    <div class="form-group">
                        <label for="favicon" class="form-label">Favicon</label>
                        <input type="file" id="favicon" name="favicon" class="form-input" accept="image/*">
                        @if($settings['favicon']  ?? null)
                        <div style="margin-top: 0.5rem;">
                            <img src="{{ asset('storage/' . $settings['favicon']) }}" alt="Current Favicon" style="max-height: 32px;">
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="form-actions" style="margin-top: 2rem;">
                <button type="submit" class="btn btn-primary">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    Save Settings
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
function guessCurrencySymbol() {
    var symbols = { 'NGN': '₦', 'USD': '$', 'GBP': '£', 'EUR': '€' };
    var code = document.getElementById('currency').value;
    if (symbols[code]) document.getElementById('currency_symbol').value = symbols[code];
}
</script>
@endpush