@extends('admin.layouts.app')

@section('title', t('admin.settings.title'))
@section('page_title', t('admin.settings.title'))

@section('content')
<div x-data="{ activeTab: '{{ request('tab', 'brand') }}' }">
    {{-- Tab navigation --}}
    <div class="border-b border-gray-200 bg-white rounded-t-lg">
        <nav class="flex flex-wrap -mb-px" aria-label="Settings tabs">
            @foreach(['brand', 'commerce', 'contact', 'system', 'mail', 'whatsapp', 'notification'] as $tab)
                <button type="button"
                    @click="activeTab = '{{ $tab }}'"
                    :class="activeTab === '{{ $tab }}'
                        ? 'border-blue-500 text-blue-600'
                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap">
                    @t('admin.settings.tab_{{ $tab }}')
                </button>
            @endforeach
        </nav>
    </div>

    {{-- Brand --}}
    <div x-show="activeTab === 'brand'" class="bg-white rounded-b-lg shadow-sm p-6">
        <form method="POST" action="{{ route('admin.settings.update') }}">
            @csrf
            <input type="hidden" name="group" value="brand">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.site_name')</label>
                    <input type="text" name="settings[site_name]" value="{{ $settings['brand']['site_name'] ?? '' }}"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.logo_url')</label>
                    <input type="text" name="settings[logo_url]" value="{{ $settings['brand']['logo_url'] ?? '' }}"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.favicon_url')</label>
                    <input type="text" name="settings[favicon_url]" value="{{ $settings['brand']['favicon_url'] ?? '' }}"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.primary_color')</label>
                    <input type="text" name="settings[primary_color]" value="{{ $settings['brand']['primary_color'] ?? '' }}"
                           placeholder="#3B82F6"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.secondary_color')</label>
                    <input type="text" name="settings[secondary_color]" value="{{ $settings['brand']['secondary_color'] ?? '' }}"
                           placeholder="#1E40AF"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
            </div>
            <div class="mt-6 flex justify-end">
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 transition-colors">
                    @t('admin.settings.save')
                </button>
            </div>
        </form>
    </div>

    {{-- Commerce --}}
    <div x-show="activeTab === 'commerce'" class="bg-white rounded-b-lg shadow-sm p-6">
        <form method="POST" action="{{ route('admin.settings.update') }}">
            @csrf
            <input type="hidden" name="group" value="commerce">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.currency')</label>
                    <input type="text" name="settings[currency]" value="{{ $settings['commerce']['currency'] ?? '' }}"
                           placeholder="TRY"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.currency_symbol')</label>
                    <input type="text" name="settings[currency_symbol]" value="{{ $settings['commerce']['currency_symbol'] ?? '' }}"
                           placeholder="₺"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.tax_rate')</label>
                    <input type="number" step="0.01" min="0" name="settings[tax_rate]" value="{{ $settings['commerce']['tax_rate'] ?? '' }}"
                           placeholder="0.00"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.min_order_amount')</label>
                    <input type="number" step="0.01" min="0" name="settings[min_order_amount]" value="{{ $settings['commerce']['min_order_amount'] ?? '' }}"
                           placeholder="0.00"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
            </div>
            <div class="mt-6 flex justify-end">
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 transition-colors">
                    @t('admin.settings.save')
                </button>
            </div>
        </form>
    </div>

    {{-- Contact --}}
    <div x-show="activeTab === 'contact'" class="bg-white rounded-b-lg shadow-sm p-6">
        <form method="POST" action="{{ route('admin.settings.update') }}">
            @csrf
            <input type="hidden" name="group" value="contact">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.address')</label>
                    <textarea name="settings[address]" rows="2"
                              class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{ $settings['contact']['address'] ?? '' }}</textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.phone')</label>
                    <input type="text" name="settings[phone]" value="{{ $settings['contact']['phone'] ?? '' }}"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.email')</label>
                    <input type="email" name="settings[email]" value="{{ $settings['contact']['email'] ?? '' }}"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.instagram_url')</label>
                    <input type="url" name="settings[instagram_url]" value="{{ $settings['contact']['instagram_url'] ?? '' }}"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.facebook_url')</label>
                    <input type="url" name="settings[facebook_url]" value="{{ $settings['contact']['facebook_url'] ?? '' }}"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.twitter_url')</label>
                    <input type="url" name="settings[twitter_url]" value="{{ $settings['contact']['twitter_url'] ?? '' }}"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
            </div>
            <div class="mt-6 flex justify-end">
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 transition-colors">
                    @t('admin.settings.save')
                </button>
            </div>
        </form>
    </div>

    {{-- System --}}
    <div x-show="activeTab === 'system'" class="bg-white rounded-b-lg shadow-sm p-6">
        <form method="POST" action="{{ route('admin.settings.update') }}">
            @csrf
            <input type="hidden" name="group" value="system">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="hidden" name="settings[maintenance_mode]" value="0">
                        <input type="checkbox" name="settings[maintenance_mode]" value="1"
                               {{ ($settings['system']['maintenance_mode'] ?? '') == '1' ? 'checked' : '' }}
                               class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="text-sm font-medium text-gray-700">@t('admin.settings.maintenance_mode')</span>
                    </label>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.cache_ttl')</label>
                    <input type="number" min="0" name="settings[cache_ttl]" value="{{ $settings['system']['cache_ttl'] ?? '' }}"
                           placeholder="3600"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <p class="text-xs text-gray-500 mt-1">@t('admin.settings.cache_ttl_hint')</p>
                </div>
            </div>
            <div class="mt-6 flex justify-end">
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 transition-colors">
                    @t('admin.settings.save')
                </button>
            </div>
        </form>
    </div>

    {{-- Mail --}}
    <div x-show="activeTab === 'mail'" class="bg-white rounded-b-lg shadow-sm p-6">
        <form method="POST" action="{{ route('admin.settings.update') }}">
            @csrf
            <input type="hidden" name="group" value="mail">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.mail_host')</label>
                    <input type="text" name="settings[mail_host]" value="{{ $settings['mail']['mail_host'] ?? '' }}"
                           placeholder="smtp.example.com"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.mail_port')</label>
                    <input type="number" name="settings[mail_port]" value="{{ $settings['mail']['mail_port'] ?? '' }}"
                           placeholder="587"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.mail_username')</label>
                    <input type="text" name="settings[mail_username]" value="{{ $settings['mail']['mail_username'] ?? '' }}"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.mail_password')</label>
                    <input type="password" name="settings[mail_password]" value="{{ $settings['mail']['mail_password'] ?? '' }}"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.mail_encryption')</label>
                    <select name="settings[mail_encryption]"
                            class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">@t('admin.settings.none')</option>
                        <option value="tls" {{ ($settings['mail']['mail_encryption'] ?? '') === 'tls' ? 'selected' : '' }}>TLS</option>
                        <option value="ssl" {{ ($settings['mail']['mail_encryption'] ?? '') === 'ssl' ? 'selected' : '' }}>SSL</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.mail_from_address')</label>
                    <input type="email" name="settings[mail_from_address]" value="{{ $settings['mail']['mail_from_address'] ?? '' }}"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.mail_from_name')</label>
                    <input type="text" name="settings[mail_from_name]" value="{{ $settings['mail']['mail_from_name'] ?? '' }}"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
            </div>
            <div class="mt-6 flex justify-end">
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 transition-colors">
                    @t('admin.settings.save')
                </button>
            </div>
        </form>
    </div>

    {{-- WhatsApp --}}
    <div x-show="activeTab === 'whatsapp'" class="bg-white rounded-b-lg shadow-sm p-6">
        <form method="POST" action="{{ route('admin.settings.update') }}">
            @csrf
            <input type="hidden" name="group" value="whatsapp">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.api_url')</label>
                    <input type="url" name="settings[api_url]" value="{{ $settings['whatsapp']['api_url'] ?? '' }}"
                           placeholder="https://graph.facebook.com/v17.0"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.api_token')</label>
                    <input type="password" name="settings[api_token]" value="{{ $settings['whatsapp']['api_token'] ?? '' }}"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.phone_number_id')</label>
                    <input type="text" name="settings[phone_number_id]" value="{{ $settings['whatsapp']['phone_number_id'] ?? '' }}"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
            </div>
            <div class="mt-6 flex justify-end">
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 transition-colors">
                    @t('admin.settings.save')
                </button>
            </div>
        </form>
    </div>

    {{-- Notification --}}
    <div x-show="activeTab === 'notification'" class="bg-white rounded-b-lg shadow-sm p-6">
        <form method="POST" action="{{ route('admin.settings.update') }}">
            @csrf
            <input type="hidden" name="group" value="notification">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="hidden" name="settings[notify_admin_email]" value="0">
                        <input type="checkbox" name="settings[notify_admin_email]" value="1"
                               {{ ($settings['notification']['notify_admin_email'] ?? '') == '1' ? 'checked' : '' }}
                               class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="text-sm font-medium text-gray-700">@t('admin.settings.notify_admin_email')</span>
                    </label>
                </div>
                <div>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="hidden" name="settings[notify_admin_whatsapp]" value="0">
                        <input type="checkbox" name="settings[notify_admin_whatsapp]" value="1"
                               {{ ($settings['notification']['notify_admin_whatsapp'] ?? '') == '1' ? 'checked' : '' }}
                               class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="text-sm font-medium text-gray-700">@t('admin.settings.notify_admin_whatsapp')</span>
                    </label>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.admin_email')</label>
                    <input type="email" name="settings[admin_email]" value="{{ $settings['notification']['admin_email'] ?? '' }}"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">@t('admin.settings.admin_whatsapp_phone')</label>
                    <input type="text" name="settings[admin_whatsapp_phone]" value="{{ $settings['notification']['admin_whatsapp_phone'] ?? '' }}"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
            </div>
            <div class="mt-6 flex justify-end">
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 transition-colors">
                    @t('admin.settings.save')
                </button>
            </div>
        </form>
    </div>
</div>
@endsection