@extends('layouts.admin')

@section('content')
    <div class="container-fluid px-4 py-6">
        {{-- Header --}}
        <div class="mb-6">
            <h1 class="text-3xl font-bold text-slate-800">⚙️ Settings</h1>
            <p class="text-slate-600 mt-1">Configure your POS system settings</p>
        </div>

        {{-- Success/Error Messages --}}
        @if(session('success'))
            <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg mb-4">
                ✅ {{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-4">
                ❌ {{ session('error') }}
            </div>
        @endif

        @if($errors->any())
            <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-4">
                <ul class="list-disc list-inside">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Tabbed Interface --}}
        <div x-data="{ activeTab: 'shop' }" class="bg-white rounded-2xl shadow-sm border border-slate-200">
            {{-- Tab Headers --}}
            <div class="border-b border-slate-200">
                <nav class="flex space-x-1 p-2" aria-label="Tabs">
                    <button @click="activeTab = 'shop'"
                        :class="activeTab === 'shop' ? 'bg-blue-50 text-blue-600' : 'text-slate-600 hover:bg-slate-50'"
                        class="px-4 py-2 rounded-lg font-medium transition">
                        🏪 Shop Info
                    </button>
                    <button @click="activeTab = 'thermal'"
                        :class="activeTab === 'thermal' ? 'bg-blue-50 text-blue-600' : 'text-slate-600 hover:bg-slate-50'"
                        class="px-4 py-2 rounded-lg font-medium transition">
                        🧾 Thermal Receipt
                    </button>
                    <button @click="activeTab = 'receipt'"
                        :class="activeTab === 'receipt' ? 'bg-blue-50 text-blue-600' : 'text-slate-600 hover:bg-slate-50'"
                        class="px-4 py-2 rounded-lg font-medium transition">
                        📄 Receipt Settings
                    </button>
                    <button @click="activeTab = 'security'"
                        :class="activeTab === 'security' ? 'bg-blue-50 text-blue-600' : 'text-slate-600 hover:bg-slate-50'"
                        class="px-4 py-2 rounded-lg font-medium transition">
                        🔒 Security
                    </button>
                    <button @click="activeTab = 'system'"
                        :class="activeTab === 'system' ? 'bg-blue-50 text-blue-600' : 'text-slate-600 hover:bg-slate-50'"
                        class="px-4 py-2 rounded-lg font-medium transition">
                        🖥️ System
                    </button>
                </nav>
            </div>

            {{-- Tab Content --}}
            <div class="p-6">
                {{-- Shop Information Tab --}}
                <div x-show="activeTab === 'shop'" x-cloak>
                    <form action="{{ route('admin.settings.update') }}" method="POST" class="space-y-6">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">Shop Name</label>
                                <input type="text" name="shop_name" value="{{ $settings['shop_name']->value ?? '' }}"
                                    class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">Phone Number</label>
                                <input type="text" name="shop_phone" value="{{ $settings['shop_phone']->value ?? '' }}"
                                    class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">Email Address</label>
                                <input type="email" name="shop_email" value="{{ $settings['shop_email']->value ?? '' }}"
                                    class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">Website</label>
                                <input type="url" name="shop_website" value="{{ $settings['shop_website']->value ?? '' }}"
                                    class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-slate-700 mb-2">Address</label>
                                <textarea name="shop_address" rows="3"
                                    class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{ $settings['shop_address']->value ?? '' }}</textarea>
                            </div>
                        </div>
                        <div class="flex justify-end">
                            <button type="submit"
                                class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                                Save Shop Information
                            </button>
                        </div>
                    </form>

                    {{-- Logo Upload --}}
                    <div class="mt-8 pt-8 border-t border-slate-200">
                        <h3 class="text-lg font-semibold text-slate-800 mb-4">Shop Logo</h3>
                        <form action="{{ route('admin.settings.logo') }}" method="POST" enctype="multipart/form-data"
                            class="space-y-4">
                            @csrf
                            @if($settings['shop_logo']->value ?? false)
                                <div class="mb-4">
                                    <img src="{{ asset('storage/' . $settings['shop_logo']->value) }}" alt="Shop Logo"
                                        class="h-24 border border-slate-200 rounded-lg">
                                </div>
                            @endif
                            <div>
                                <input type="file" name="logo" accept="image/*"
                                    class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                            </div>
                            <button type="submit"
                                class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                                Upload Logo
                            </button>
                        </form>
                    </div>
                </div>

                {{-- Thermal Receipt Tab --}}
                <div x-show="activeTab === 'thermal'" x-cloak>
                    <form action="{{ route('admin.settings.update') }}" method="POST" class="space-y-6">
                        @csrf
                        <div class="space-y-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">Header Text</label>
                                <textarea name="thermal_header" rows="3"
                                    class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{ $settings['thermal_header']->value ?? '' }}</textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">Footer Text</label>
                                <textarea name="thermal_footer" rows="3"
                                    class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{ $settings['thermal_footer']->value ?? '' }}</textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">Paper Width</label>
                                <div class="flex gap-4">
                                    <label class="flex items-center">
                                        <input type="radio" name="thermal_paper_width" value="58" {{ ($settings['thermal_paper_width']->value ?? '80') == '58' ? 'checked' : '' }}
                                            class="mr-2">
                                        58mm
                                    </label>
                                    <label class="flex items-center">
                                        <input type="radio" name="thermal_paper_width" value="80" {{ ($settings['thermal_paper_width']->value ?? '80') == '80' ? 'checked' : '' }}
                                            class="mr-2">
                                        80mm
                                    </label>
                                </div>
                            </div>
                            <div>
                                <label class="flex items-center">
                                    <input type="checkbox" name="thermal_show_logo" value="1" {{ ($settings['thermal_show_logo']->value ?? '1') == '1' ? 'checked' : '' }}
                                        class="mr-2">
                                    <span class="text-sm font-medium text-slate-700">Show logo on thermal receipt</span>
                                </label>
                            </div>
                        </div>
                        <div class="flex justify-end">
                            <button type="submit"
                                class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                                Save Thermal Settings
                            </button>
                        </div>
                    </form>

                    {{-- Receipt Header Image Upload --}}
                    <div class="mt-8 pt-8 border-t border-slate-200">
                        <h3 class="text-lg font-semibold text-slate-800 mb-4">Receipt Header Image</h3>
                        <p class="text-sm text-slate-500 mb-4">Upload an image to replace the text header on the receipt.</p>
                        
                        <form action="{{ route('admin.settings.thermal-logo') }}" method="POST" enctype="multipart/form-data"
                            class="space-y-4">
                            @csrf
                            @if($settings['thermal_header_image']->value ?? false)
                                <div class="mb-4">
                                    <p class="text-xs text-slate-500 mb-1">Current Header Image:</p>
                                    <img src="{{ asset('storage/' . $settings['thermal_header_image']->value) }}" alt="Receipt Header"
                                        class="max-w-[300px] border border-slate-200 rounded-lg">
                                </div>
                            @endif
                            <div>
                                <input type="file" name="thermal_header_image" accept="image/*"
                                    class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                            </div>
                            <button type="submit"
                                class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                                Upload Header Image
                            </button>
                        </form>
                    </div>
                </div>

                {{-- Receipt Settings Tab --}}
                <div x-show="activeTab === 'receipt'" x-cloak>
                    <form action="{{ route('admin.settings.update') }}" method="POST" class="space-y-6">
                        @csrf
                        <div class="space-y-4">
                            <div>
                                <label class="flex items-center">
                                    <input type="checkbox" name="receipt_show_email" value="1" {{ ($settings['receipt_show_email']->value ?? '1') == '1' ? 'checked' : '' }}
                                        class="mr-2">
                                    <span class="text-sm font-medium text-slate-700">Show email on receipt</span>
                                </label>
                            </div>
                            <div>
                                <label class="flex items-center">
                                    <input type="checkbox" name="receipt_show_website" value="1" {{ ($settings['receipt_show_website']->value ?? '1') == '1' ? 'checked' : '' }}
                                        class="mr-2">
                                    <span class="text-sm font-medium text-slate-700">Show website on receipt</span>
                                </label>
                            </div>
                        </div>
                        <div class="flex justify-end">
                            <button type="submit"
                                class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                                Save Receipt Settings
                            </button>
                        </div>
                    </form>
                </div>

                {{-- Security Tab --}}
                <div x-show="activeTab === 'security'" x-cloak>
                    <div class="space-y-8">
                        {{-- Password Change --}}
                        <div>
                            <h3 class="text-lg font-semibold text-slate-800 mb-4">Change Password</h3>
                            <form action="{{ route('admin.settings.password') }}" method="POST" class="space-y-4">
                                @csrf
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">Current Password</label>
                                    <input type="password" name="current_password" required
                                        class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">New Password</label>
                                    <input type="password" name="new_password" required
                                        class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">Confirm New
                                        Password</label>
                                    <input type="password" name="new_password_confirmation" required
                                        class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                </div>
                                <button type="submit"
                                    class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                                    Change Password
                                </button>
                            </form>
                        </div>

                        {{-- Session Timeout --}}
                        <div class="pt-8 border-t border-slate-200">
                            <h3 class="text-lg font-semibold text-slate-800 mb-4">Session Settings</h3>
                            <form action="{{ route('admin.settings.update') }}" method="POST" class="space-y-4">
                                @csrf
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">Session Timeout
                                        (minutes)</label>
                                    <select name="session_timeout"
                                        class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        <option value="15" {{ ($settings['session_timeout']->value ?? '60') == '15' ? 'selected' : '' }}>15 minutes</option>
                                        <option value="30" {{ ($settings['session_timeout']->value ?? '60') == '30' ? 'selected' : '' }}>30 minutes</option>
                                        <option value="60" {{ ($settings['session_timeout']->value ?? '60') == '60' ? 'selected' : '' }}>1 hour</option>
                                        <option value="120" {{ ($settings['session_timeout']->value ?? '60') == '120' ? 'selected' : '' }}>2 hours</option>
                                    </select>
                                </div>
                                <button type="submit"
                                    class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                                    Save Session Settings
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                {{-- System Tab --}}
                <div x-show="activeTab === 'system'" x-cloak>
                    <div class="space-y-8">
                        {{-- System Actions --}}
                        <div>
                            <h3 class="text-lg font-semibold text-slate-800 mb-4">System Actions</h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <form action="{{ route('admin.settings.cache') }}" method="POST">
                                    @csrf
                                    <button type="submit"
                                        class="w-full px-6 py-3 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition flex items-center justify-center gap-2">
                                        🗑️ Clear Cache
                                    </button>
                                </form>
                                <form action="{{ route('admin.settings.backup') }}" method="POST">
                                    @csrf
                                    <button type="submit"
                                        class="w-full px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center justify-center gap-2">
                                        💾 Create Backup
                                    </button>
                                </form>
                            </div>
                        </div>

                        {{-- System Information --}}
                        <div class="pt-8 border-t border-slate-200">
                            <h3 class="text-lg font-semibold text-slate-800 mb-4">System Information</h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="bg-slate-50 p-4 rounded-lg">
                                    <div class="text-sm text-slate-600">Laravel Version</div>
                                    <div class="text-lg font-semibold text-slate-800">{{ $systemInfo['laravel_version'] }}
                                    </div>
                                </div>
                                <div class="bg-slate-50 p-4 rounded-lg">
                                    <div class="text-sm text-slate-600">PHP Version</div>
                                    <div class="text-lg font-semibold text-slate-800">{{ $systemInfo['php_version'] }}</div>
                                </div>
                                <div class="bg-slate-50 p-4 rounded-lg">
                                    <div class="text-sm text-slate-600">Database Size</div>
                                    <div class="text-lg font-semibold text-slate-800">{{ $systemInfo['database_size'] }}
                                    </div>
                                </div>
                                <div class="bg-slate-50 p-4 rounded-lg">
                                    <div class="text-sm text-slate-600">Disk Usage</div>
                                    <div class="text-lg font-semibold text-slate-800">{{ $systemInfo['disk_usage'] }}</div>
                                </div>
                                <div class="bg-slate-50 p-4 rounded-lg">
                                    <div class="text-sm text-slate-600">Total Products</div>
                                    <div class="text-lg font-semibold text-slate-800">
                                        {{ number_format($systemInfo['total_products']) }}</div>
                                </div>
                                <div class="bg-slate-50 p-4 rounded-lg">
                                    <div class="text-sm text-slate-600">Total Invoices</div>
                                    <div class="text-lg font-semibold text-slate-800">
                                        {{ number_format($systemInfo['total_invoices']) }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
@endsection