@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.send-backup-email') }}" method="POST"
                                    onsubmit="return confirm('This will generate a database backup now and email it to the configured backup address. Continue?')">
                                    @csrf
                                    <button type="submit"
                                        class="w-full px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center justify-center gap-2">
                                        💾 Create & Email DB 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>
                        {{-- Backup Settings --}}
                        <div class="pt-8 border-t border-slate-200">
                            <h3 class="text-lg font-semibold text-slate-800 mb-4">Backup Settings</h3>
                            <form action="{{ route('admin.settings.update') }}" method="POST" class="space-y-4">
                                @csrf
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div
                                        class="md:col-span-2 bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm text-blue-700">
                                        ⏱️ <strong>Server Time:</strong> {{ now()->format('Y-m-d H:i:s') }}
                                        ({{ config('app.timezone') }})<br>
                                        <span class="text-xs">Set the backup time according to the server time above.</span>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-700 mb-2">Backup Recipient
                                            Email</label>
                                        <input type="email" name="backup_email"
                                            value="{{ $settings['backup_email']->value ?? env('MAIL_FROM_ADDRESS') }}"
                                            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">Daily Backup
                                            Time</label>
                                        <input type="time" name="backup_time"
                                            value="{{ $settings['backup_time']->value ?? '02:00' }}" 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>
                                <button type="submit"
                                    class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition mb-6">
                                    Save Backup Settings
                                </button>
                            </form>

                            {{-- Web Cron Instructions --}}
                            <div class="mt-6 p-4 bg-slate-50 border border-slate-200 rounded-lg">
                                <h4 class="font-medium text-slate-800 mb-2 flex items-center gap-2">
                                    <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    Automate Backups without cPanel (Web Cron)
                                </h4>
                                <p class="text-sm text-slate-600 mb-4">
                                    If you cannot set up a Cron Job in your hosting panel, you can use a free external
                                    service like <strong><a href="https://cron-job.org/" target="_blank"
                                            class="text-blue-600 hover:underline">cron-job.org</a></strong> to automate your
                                    backups.
                                </p>
                                <p class="text-sm text-slate-600 mb-2">
                                    Simply create a free account there and set it to visit the URL below <strong>Every 1
                                        Minute</strong>. It will automatically trigger your backup at the time you
                                    configured above.
                                </p>

                                <div class="relative mt-2">
                                    <input type="text" readonly
                                        value="{{ url('/run-scheduler/' . hash('sha256', config('app.key'))) }}"
                                        class="w-full px-4 py-2 pr-10 bg-slate-100 border border-slate-300 rounded-lg text-sm text-slate-700 font-mono focus:outline-none"
                                        id="cronUrl">
                                    <button
                                        onclick="navigator.clipboard.writeText(document.getElementById('cronUrl').value); alert('URL Copied!')"
                                        class="absolute right-2 top-2 p-1 text-slate-500 hover:text-blue-600 transition"
                                        title="Copy URL">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3">
                                            </path>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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