@extends('layouts.admin')

@section('title', 'Admin Settings - AutoPart')

@section('header', 'Settings')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">

    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
            {{ session('success') }}
        </div>
    @endif

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="p-6 border-b border-gray-100">
            <h2 class="text-xl font-bold text-gray-800 flex items-center gap-2">
                <i data-lucide="settings" class="w-5 h-5 text-gray-500"></i>
                Application Settings
            </h2>
            <p class="text-gray-500 text-sm mt-1">Configure your store's global details and branding.</p>
        </div>

        <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data" class="p-6">
            @csrf

            <!-- General Settings Section -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">General Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Store Name</label>
                        <input type="text" name="site_name" value="{{ \App\Models\Setting::get('site_name', 'AutoPart Store') }}" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-red-500 focus:ring-red-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Currency Symbol</label>
                        <input type="text" name="site_currency" value="{{ \App\Models\Setting::get('site_currency', '$') }}" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-red-500 focus:ring-red-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Admin Contact Email</label>
                        <input type="email" name="admin_email" value="{{ \App\Models\Setting::get('admin_email', 'admin@autopart.com') }}" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-red-500 focus:ring-red-500">
                    </div>
                </div>
            </div>

            <!-- Branding Section -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">Branding Graphics</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Logo -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Site Logo (Current: {{ \App\Models\Setting::get('site_logo', 'Default text') }})</label>
                        <div class="flex items-center gap-4">
                            @if(\App\Models\Setting::get('site_logo'))
                                <img src="{{ asset('images/branding/' . \App\Models\Setting::get('site_logo')) }}" alt="Logo" class="h-12 object-contain border rounded p-1">
                            @else
                                <div class="h-12 w-32 bg-gray-100 border rounded flex items-center justify-center text-xs text-gray-400">No Custom Logo</div>
                            @endif
                            <input type="file" name="logo" class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-red-50 file:text-red-700 hover:file:bg-red-100">
                        </div>
                        @error('logo') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                    </div>

                    <!-- Favicon -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Favicon</label>
                        <div class="flex items-center gap-4">
                            @if(\App\Models\Setting::get('site_favicon'))
                                <img src="{{ asset('images/branding/' . \App\Models\Setting::get('site_favicon')) }}" alt="Favicon" class="h-10 w-10 object-contain border rounded p-1">
                            @endif
                            <input type="file" name="favicon" class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-gray-50 file:text-gray-700 hover:file:bg-gray-100">
                        </div>
                        @error('favicon') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                    </div>
                </div>
            </div>

            <!-- SMTP Section -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">SMTP / Email Provider (Optional)</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Mail Host</label>
                        <input type="text" name="mail_host" value="{{ \App\Models\Setting::get('mail_host', 'smtp.mailtrap.io') }}" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-red-500 focus:ring-red-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Mail Port</label>
                        <input type="text" name="mail_port" value="{{ \App\Models\Setting::get('mail_port', '2525') }}" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-red-500 focus:ring-red-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Mail Username</label>
                        <input type="text" name="mail_username" value="{{ \App\Models\Setting::get('mail_username', '') }}" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-red-500 focus:ring-red-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Mail Password</label>
                        <input type="password" name="mail_password" value="{{ \App\Models\Setting::get('mail_password', '') }}" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-red-500 focus:ring-red-500">
                    </div>
                </div>
            </div>

            <div class="flex justify-end pt-4 border-t border-gray-100">
                <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-lg font-semibold flex items-center gap-2 transition-colors">
                    <i data-lucide="save" class="w-5 h-5"></i>
                    Save Settings
                </button>
            </div>
        </form>
    </div>
</div>
@endsection