@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',
            shopName: '{{ addslashes($settings['shop_name']->value ?? app_name()) }}',
            shopAddress: '{{ addslashes(str_replace(["\r", "\n"], '\n', $settings['shop_address']->value ?? 'Mahagalkadawala, Galgamuwa')) }}',
            shopPhone: '{{ addslashes($settings['shop_phone']->value ?? '0779294928') }}',
            shopEmail: '{{ addslashes($settings['shop_email']->value ?? '') }}',
            shopWebsite: '{{ addslashes($settings['shop_website']->value ?? '') }}',
            showEmail: {{ ($settings['receipt_show_email']->value ?? '1') == '1' ? 'true' : 'false' }},
            showWebsite: {{ ($settings['receipt_show_website']->value ?? '1') == '1' ? 'true' : 'false' }},
            receiptSlogan: '{{ addslashes($settings['receipt_slogan']->value ?? 'Best Products at Lowest Price') }}',
            receiptSpecialText: '{{ addslashes(str_replace(["\r", "\n"], '\n', $settings['receipt_special_text']->value ?? 'Warranty is subject to manufacturer terms.')) }}',
            thermalHeader: '{{ addslashes(str_replace(["\r", "\n"], '\n', $settings['thermal_header']->value ?? '')) }}',
            thermalFooter: '{{ addslashes(str_replace(["\r", "\n"], '\n', $settings['thermal_footer']->value ?? '')) }}',
            thermalShowLogo: {{ ($settings['thermal_show_logo']->value ?? '0') == '1' ? 'true' : 'false' }},
            paperWidth: '{{ $settings['thermal_paper_width']->value ?? '80' }}'
        }" 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 = '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 grid grid-cols-1 lg:grid-cols-3 gap-8">
                {{-- Left Column: Form Controls --}}
                <div class="lg:col-span-2 space-y-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" x-model="shopName" 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" x-model="shopPhone" 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" x-model="shopEmail" 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" x-model="shopWebsite" 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" x-model="shopAddress" 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">Paper Width</label>
                                <div class="flex gap-4">
                                    <label class="flex items-center">
                                        <input type="radio" name="thermal_paper_width" value="58" x-model="paperWidth"
                                            class="mr-2">
                                        58mm
                                    </label>
                                    <label class="flex items-center">
                                        <input type="radio" name="thermal_paper_width" value="80" x-model="paperWidth"
                                            class="mr-2">
                                        80mm
                                    </label>
                                </div>
                            </div>
                            <div>
                                <label class="flex items-center">
                                    <input type="checkbox" name="thermal_show_logo" value="1" x-model="thermalShowLogo"
                                        class="mr-2">
                                    <span class="text-sm font-medium text-slate-700">Show logo on thermal receipt</span>
                                </label>
                            </div>
                            <div class="border-t border-slate-100 pt-4 flex gap-6">
                                <label class="flex items-center">
                                    <input type="checkbox" name="receipt_show_email" value="1" x-model="showEmail"
                                        class="mr-2 rounded border-slate-350 text-blue-600 focus:ring-blue-500">
                                    <span class="text-sm font-medium text-slate-700">Show Email on Bill</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="checkbox" name="receipt_show_website" value="1" x-model="showWebsite"
                                        class="mr-2 rounded border-slate-350 text-blue-600 focus:ring-blue-500">
                                    <span class="text-sm font-medium text-slate-700">Show Website on Bill</span>
                                </label>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">Receipt Footer Slogan</label>
                                <input type="text" name="receipt_slogan" x-model="receiptSlogan" placeholder="e.g. Best Products at Lowest Price"
                                    class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">Bill Special Text / Warranty Terms</label>
                                <textarea name="receipt_special_text" x-model="receiptSpecialText" rows="4" placeholder="Specify warranty terms, damage policies, or return conditions printed on bills..."
                                    class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"></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 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>



                {{-- 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> {{-- End Left Column --}}

                {{-- Persistent Live Preview Box (Right Column) --}}
                <div x-show="activeTab === 'thermal'" class="space-y-4" x-transition x-cloak>
                    <h3 class="font-bold text-slate-500 text-xs uppercase tracking-wider">Live Invoice Preview</h3>
                    <div class="bg-slate-105 rounded-2xl p-4 flex justify-center border border-slate-200 sticky top-6">
                        {{-- Thermal Bill Mock --}}
                        <div class="w-full bg-white border border-dashed border-slate-400 p-5 rounded-lg shadow-sm font-mono text-[10px] text-slate-800 space-y-3 transition-all duration-300"
                            :class="paperWidth === '58' ? 'max-w-[220px]' : 'max-w-[280px]'">
                            
                            {{-- Optional Header Image/Logo --}}
                            <div x-show="thermalShowLogo" class="text-center pb-2 border-b border-dashed border-slate-200">
                                <div class="w-12 h-12 bg-slate-100 border border-slate-300 rounded mx-auto flex items-center justify-center text-[8px] text-slate-400">
                                    [LOGO]
                                </div>
                            </div>

                            <div class="text-center space-y-1">
                                <div class="font-bold text-sm tracking-wider uppercase" x-text="shopName || 'POS Retail'"></div>
                                <div class="whitespace-pre-line leading-normal text-slate-500 text-[9px]" x-text="shopAddress || 'Store Address'"></div>
                                <div class="text-slate-500" x-text="'Tel: ' + (shopPhone || 'Telephone')"></div>
                                <div x-show="showEmail && shopEmail" class="text-slate-500 text-[9px]" x-text="'Email: ' + shopEmail"></div>
                                <div x-show="showWebsite && shopWebsite" class="text-slate-500 text-[9px]" x-text="'Web: ' + shopWebsite"></div>
                            </div>

                            {{-- Custom Thermal Header --}}
                            <div x-show="thermalHeader" class="text-center text-slate-600 text-[9px] bg-slate-50 p-1.5 rounded whitespace-pre-line border border-slate-100" x-text="thermalHeader"></div>
                            
                            <div class="border-b border-dashed border-slate-300 my-2"></div>
                            
                            <div class="space-y-1 text-[9px]">
                                <div class="flex justify-between"><span>Invoice No: COL01-260711-0002</span><span>2026-07-11 12:00</span></div>
                                <div class="flex justify-between"><span>Cashier: Admin User</span><span>Cust: Walk-in</span></div>
                            </div>
                            
                            <div class="border-b border-dashed border-slate-300 my-2"></div>
                            
                            <table class="w-full text-[9px] border-collapse">
                                <thead>
                                    <tr class="text-left font-bold border-b border-slate-300">
                                        <th class="py-1">Qty</th>
                                        <th class="text-right py-1">Price</th>
                                        <th class="text-right py-1">Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="3" class="font-bold pt-1 text-left">Samsung Galaxy</td>
                                    </tr>
                                    <tr>
                                        <td class="text-left">1 x</td>
                                        <td class="text-right">21,000.00</td>
                                        <td class="text-right">21,000.00</td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" class="text-slate-500 italic pl-2 text-[8px] bg-slate-50 px-1 py-0.5 rounded text-left">
                                            <span class="bg-blue-100 text-blue-800 text-[7px] font-bold px-1 rounded">New</span>
                                            <span class="ml-1 text-[8px]">12 Months Warranty</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            
                            <div class="border-b border-dashed border-slate-300 my-2"></div>
                            
                            <div class="space-y-1 font-bold text-[9px]">
                                <div class="flex justify-between"><span>Subtotal:</span><span>21,000.00</span></div>
                                <div class="flex justify-between text-xs border-t border-slate-300 pt-1"><span>TOTAL:LKR 21,000.00</span></div>
                            </div>
                            
                            <div class="border-b border-dashed border-slate-300 my-2"></div>
                            
                            <div class="text-center space-y-2">
                                <p class="font-bold text-[11px]" x-text="receiptSlogan || 'Best Products at Lowest Price'"></p>
                                <p class="text-slate-500 whitespace-pre-line leading-relaxed text-[9px]" x-text="receiptSpecialText"></p>
                                
                                {{-- Custom Thermal Footer --}}
                                <div x-show="thermalFooter" class="text-[9px] text-slate-600 bg-slate-50 p-1.5 rounded whitespace-pre-line border border-slate-100 my-1" x-text="thermalFooter"></div>
                                
                                <p class="text-slate-400 text-[8px]">Software by Camellia Network - 0710875417</p>
                            </div>
                        </div>
                    </div>
                </div> {{-- End Right Column --}}
            </div> {{-- End Grid Container --}}
        </div>
    </div>

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