@extends('layouts.authenticated')

@section('title', 'Pengaturan')
@section('page-title', 'Pengaturan')

@section('page-content')
<div class="space-y-6 animate-fade-in" x-data="{ activeTab: 'general', testPrinterOpen: false, selectedPrinter: '', showAddPrinter: false, showEditPrinter: false, editMode: false, editAction: '', printerForm: { id: '', name: '', connection_type: 'browser', ip_address: '', port: 9100, bluetooth_name: '', paper_size: '80mm', is_default: false } }">
    <!-- Header -->
    <div>
        <h1 class="text-xl font-semibold text-slate-900 dark:text-white">Pengaturan</h1>
        <p class="text-slate-500 dark:text-slate-400 mt-1 text-sm">Kelola konfigurasi toko dan preferensi aplikasi</p>
    </div>

    <!-- Tabs -->
    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 p-1.5">
        <div class="flex gap-1 overflow-x-auto">
            <button @click="activeTab = 'general'"
                    :class="activeTab === 'general' ? 'bg-blue-600 text-white shadow-sm' : 'text-slate-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-700'"
                    class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                <span class="hidden sm:inline">Umum</span>
            </button>
            <button @click="activeTab = 'theme'"
                    :class="activeTab === 'theme' ? 'bg-blue-600 text-white shadow-sm' : 'text-slate-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-700'"
                    class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg>
                <span class="hidden sm:inline">Tema</span>
            </button>
            <button @click="activeTab = 'pos'"
                    :class="activeTab === 'pos' ? 'bg-blue-600 text-white shadow-sm' : 'text-slate-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-700'"
                    class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 36v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
                <span class="hidden sm:inline">POS</span>
            </button>
            <button @click="activeTab = 'printer'"
                    :class="activeTab === 'printer' ? 'bg-blue-600 text-white shadow-sm' : 'text-slate-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-700'"
                    class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path></svg>
                <span class="hidden sm:inline">Printer</span>
            </button>
        </div>
    </div>

    <!-- General Settings -->
    <div x-show="activeTab === 'general'" x-transition x-data="logoUpload()" class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 overflow-hidden">
        <div class="p-5 border-b border-gray-200 dark:border-slate-700">
            <h3 class="text-base font-semibold text-slate-900 dark:text-white">Informasi Toko</h3>
            <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Pengaturan global - berlaku untuk semua cabang</p>
        </div>
        <form action="{{ route('settings.general') }}" method="POST" enctype="multipart/form-data" class="p-5 space-y-4">
            @csrf

            <!-- Logo Upload Drag & Drop -->
            <div>
                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Logo Toko</label>
                <div
                    id="logo-dropzone"
                    class="relative border-2 border-dashed rounded-lg p-6 text-center transition-colors cursor-pointer
                           border-gray-300 dark:border-slate-600 hover:border-blue-400 dark:hover:border-blue-500
                           bg-gray-50 dark:bg-slate-700/50"
                    :class="{ 'border-blue-500 bg-blue-50 dark:bg-blue-900/20': isDragging }"
                    @dragover.prevent="isDragging = true"
                    @dragleave.prevent="isDragging = false"
                    @drop.prevent="handleDrop"
                    @click="$refs.logoInput.click()"
                >
                    <input type="file" x-ref="logoInput" name="logo" class="hidden" accept="image/*" @change="handleFileSelect">

                    <!-- Upload Prompt -->
                    <div x-show="!previewUrl && !existingLogo" class="space-y-2">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                        </svg>
                        <p class="text-sm text-slate-600 dark:text-slate-400">
                            <span class="font-medium text-blue-600 hover:text-blue-500">Klik atau drag & drop</span> untuk upload logo
                        </p>
                        <p class="text-xs text-slate-500">PNG, JPG, SVG (Maks. 2MB)</p>
                    </div>

                    <!-- Preview -->
                    <div x-show="previewUrl || existingLogo" class="space-y-2">
                        <img :src="previewUrl || existingLogo" alt="Logo Preview" class="mx-auto max-h-24 object-contain rounded-lg">
                        <p class="text-sm text-slate-600 dark:text-slate-400" x-text="fileName || 'Logo tersimpan'"></p>
                        <button type="button" @click.stop="removeLogo()" class="text-sm text-red-600 hover:text-red-500">
                            Hapus logo
                        </button>
                    </div>
                </div>
                <input type="hidden" name="remove_logo" x-model="removeLogoFlag">
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Nama Toko</label>
                    <input type="text" name="store_name" value="{{ $settings['store_name'] ?? '' }}" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
                </div>
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Alamat</label>
                    <textarea name="store_address" rows="2" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">{{ $settings['store_address'] ?? '' }}</textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Telepon</label>
                    <input type="text" name="store_phone" value="{{ $settings['store_phone'] ?? '' }}" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Email</label>
                    <input type="email" name="store_email" value="{{ $settings['store_email'] ?? '' }}" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
                </div>
            </div>
            <button type="submit" class="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg">Simpan Pengaturan</button>
        </form>
    </div>

    <script>
    function logoUpload() {
        return {
            isDragging: false,
            previewUrl: null,
            fileName: '',
            removeLogoFlag: '0',
            existingLogo: '@if(!empty($settings['store_logo'])){{ asset('uploads/logo/' . $settings['store_logo']) }}@endif',
            
            handleFileSelect(event) {
                const file = event.target.files[0];
                if (file) {
                    console.log('File selected:', file.name, file.size);
                    this.processFile(file);
                }
            },
            
            handleDrop(event) {
                this.isDragging = false;
                const file = event.dataTransfer.files[0];
                if (file && file.type.startsWith('image/')) {
                    console.log('File dropped:', file.name, file.size);
                    this.processFile(file);
                    const dataTransfer = new DataTransfer();
                    dataTransfer.items.add(file);
                    this.$refs.logoInput.files = dataTransfer.files;
                    console.log('File attached to input:', this.$refs.logoInput.files[0]?.name);
                }
            },
            
            processFile(file) {
                if (file.size > 2 * 1024 * 1024) {
                    alert('Ukuran file maksimal 2MB');
                    return;
                }
                this.fileName = file.name;
                this.previewUrl = URL.createObjectURL(file);
                this.removeLogoFlag = '0';
            },
            
            removeLogo() {
                console.log('Logo removed');
                this.previewUrl = null;
                this.existingLogo = null;
                this.fileName = '';
                this.removeLogoFlag = '1';
                this.$refs.logoInput.value = '';
            }
        }
    }
    
    // Debug form submission
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('form[action*="settings"]');
        if (form) {
            form.addEventListener('submit', function(e) {
                const fileInput = form.querySelector('input[name="logo"]');
                const removeInput = form.querySelector('input[name="remove_logo"]');
                console.log('Form submitting...');
                console.log('File:', fileInput?.files[0]?.name || 'none');
                console.log('Remove flag:', removeInput?.value);
            });
        }
    });
    </script>

    <!-- Theme Settings -->
    <div x-show="activeTab === 'theme'" x-transition class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 overflow-hidden">
        <div class="p-5 border-b border-gray-200 dark:border-slate-700">
            <h3 class="text-base font-semibold text-slate-900 dark:text-white">Tema Aplikasi</h3>
        </div>
        <form action="{{ route('settings.theme') }}" method="POST" class="p-5 space-y-4">
            @csrf
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                @foreach($themes as $key => $theme)
                <label class="cursor-pointer">
                    <input type="radio" name="theme" value="{{ $key }}" class="sr-only peer" {{ ($theme ?? 'blue') === $key ? 'checked' : '' }}>
                    <div class="p-4 rounded-lg border-2 peer-checked:border-blue-500 peer-checked:ring-2 peer-checked:ring-blue-500/20 text-center transition-all" style="background: {{ $theme['gradient'] }};">
                        <p class="text-white font-medium text-sm">{{ $theme['name'] }}</p>
                    </div>
                </label>
                @endforeach
            </div>
            <button type="submit" class="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg">Simpan Tema</button>
        </form>
    </div>

    <!-- POS Settings -->
    <div x-show="activeTab === 'pos'" x-transition class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 overflow-hidden">
        <div class="p-5 border-b border-gray-200 dark:border-slate-700">
            <h3 class="text-base font-semibold text-slate-900 dark:text-white">Pengaturan POS</h3>
        </div>
        <form action="{{ route('settings.pos') }}" method="POST" class="p-5 space-y-4">
            @csrf
            <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-slate-700/50 rounded-lg">
                <div>
                    <p class="text-sm font-medium text-slate-900 dark:text-white">Aktifkan Pajak</p>
                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">Tambahkan pajak pada transaksi</p>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" name="tax_enabled" value="1" {{ ($posSettings['tax_enabled'] ?? false) ? 'checked' : '' }} class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                </label>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Persentase Pajak (%)</label>
                <input type="number" name="tax_rate" value="{{ $posSettings['tax_rate'] ?? 0 }}" min="0" max="100" step="0.01" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Metode Pembayaran Default</label>
                <select name="default_payment" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
                    <option value="cash" {{ ($posSettings['default_payment'] ?? 'cash') === 'cash' ? 'selected' : '' }}>Tunai</option>
                    <option value="transfer" {{ ($posSettings['default_payment'] ?? '') === 'transfer' ? 'selected' : '' }}>Transfer</option>
                    <option value="qris" {{ ($posSettings['default_payment'] ?? '') === 'qris' ? 'selected' : '' }}>QRIS</option>
                </select>
            </div>
            <button type="submit" class="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg">Simpan POS</button>
        </form>
    </div>

    <!-- Printer Settings -->
    <div x-show="activeTab === 'printer'" x-transition class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 overflow-hidden">
        <div class="p-5 border-b border-gray-200 dark:border-slate-700">
            <h3 class="text-base font-semibold text-slate-900 dark:text-white">Pengaturan Printer</h3>
        </div>
        <form action="{{ route('settings.printer') }}" method="POST" enctype="multipart/form-data" class="p-5 space-y-4">
            @csrf
            @php
                $printerLogo = \App\Services\SettingsService::get('printer_logo', null, $branch->id);
                $printerLogoUrl = $printerLogo ? asset('uploads/printer-logo/' . $printerLogo) : null;
            @endphp
            <div>
                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Ukuran Kertas</label>
                <select name="printer_paper_size" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
                    <option value="58mm" {{ ($printerSettings['printer_paper_size'] ?? '80mm') === '58mm' ? 'selected' : '' }}>58mm (Thermal Kecil)</option>
                    <option value="80mm" {{ ($printerSettings['printer_paper_size'] ?? '80mm') === '80mm' ? 'selected' : '' }}>80mm (Thermal Besar)</option>
                </select>
            </div>
            <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-slate-700/50 rounded-lg">
                <div>
                    <p class="text-sm font-medium text-slate-900 dark:text-white">Tampilkan Logo di Struk</p>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" name="printer_show_logo" value="1" {{ ($printerSettings['printer_show_logo'] ?? true) ? 'checked' : '' }} class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                </label>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Logo Print</label>
                <div class="flex items-start gap-4 p-4 bg-gray-50 dark:bg-slate-700/50 rounded-lg border border-dashed border-gray-300 dark:border-slate-600">
                    <div class="w-20 h-20 rounded-lg bg-white border border-gray-200 dark:border-slate-600 flex items-center justify-center overflow-hidden shrink-0">
                        @if(!empty($printerLogoUrl))
                            <img src="{{ $printerLogoUrl }}" alt="Logo Print" class="w-full h-full object-contain">
                        @else
                            <span class="text-[10px] text-slate-400 text-center px-2">Belum ada logo</span>
                        @endif
                    </div>
                    <div class="flex-1">
                        <input type="file" name="printer_logo" accept="image/*" class="block w-full text-sm text-slate-700 dark:text-slate-300 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-blue-600 file:text-white hover:file:bg-blue-700">
                        <p class="text-xs text-slate-500 dark:text-slate-400 mt-2">Upload logo khusus struk printer. Jika diisi, logo ini dipakai pada preview dan print receipt.</p>
                    </div>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Footer Struk</label>
                <input type="text" name="printer_footer_text" value="{{ $printerSettings['printer_footer_text'] ?? 'Terima kasih!' }}" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
            </div>
            <div class="flex gap-3">
                <button type="button" @click="testPrinterOpen = true" class="px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium rounded-lg">
                    <svg class="w-4 h-4 inline mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path></svg>
                    Test Printer
                </button>
                <button type="submit" class="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg">Simpan Printer</button>
            </div>
        </form>

        <!-- Printer Management -->
        <div class="p-5 border-t border-gray-200 dark:border-slate-700">
            <div class="flex items-center justify-between mb-4">
                <h4 class="text-sm font-semibold text-slate-900 dark:text-white">Daftar Printer</h4>
                <button type="button" @click="showAddPrinter = true" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded-lg">
                    <svg class="w-3.5 h-3.5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                    Tambah Printer
                </button>
            </div>

            @if($printers->count() > 0)
            <div class="space-y-2">
                @foreach($printers as $p)
                <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-slate-700/50 rounded-lg">
                    <div class="flex-1">
                        <div class="flex items-center gap-2">
                            <p class="text-sm font-medium text-slate-900 dark:text-white">{{ $p->name }}</p>
                            @if($p->is_default)
                            <span class="px-2 py-0.5 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-xs rounded-full">Default</span>
                            @endif
                            @if(!$p->is_active)
                            <span class="px-2 py-0.5 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 text-xs rounded-full">Nonaktif</span>
                            @endif
                        </div>
                        <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
                            {{ ucfirst($p->connection_type) }} 
                            @if($p->connection_type === 'network')
                            - {{ $p->ip_address }}:{{ $p->port }}
                            @elseif($p->connection_type === 'bluetooth')
                            - {{ $p->bluetooth_name ?? '-' }}
                            @endif
                            | {{ $p->paper_size }}
                        </p>
                    </div>
                    <div class="flex items-center gap-1">
                        @if(!$p->is_default)
                        <form action="{{ route('settings.printers.set-default', $p) }}" method="POST">
                            @csrf
                            <button type="submit" class="px-2 py-1 bg-gray-200 dark:bg-slate-600 hover:bg-gray-300 dark:hover:bg-slate-500 text-slate-700 dark:text-slate-300 text-xs rounded" title="Set as Default">
                                ★
                            </button>
                        </form>
                        @endif
                        <button type="button" @click="editPrinter({{ $p->id }}, {{ json_encode($p) }})" class="px-2 py-1 bg-blue-200 dark:bg-blue-900/30 hover:bg-blue-300 dark:hover:bg-blue-900/50 text-blue-700 dark:text-blue-400 text-xs rounded">
                            Edit
                        </button>
                        <form action="{{ route('settings.printers.destroy', $p) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus printer ini?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="px-2 py-1 bg-red-200 dark:bg-red-900/30 hover:bg-red-300 dark:hover:bg-red-900/50 text-red-700 dark:text-red-400 text-xs rounded">
                                Hapus
                            </button>
                        </form>
                    </div>
                </div>
                @endforeach
            </div>
            @else
            <p class="text-sm text-slate-500 dark:text-slate-400 text-center py-4">Belum ada printer. Tambahkan printer untuk mulai mencetak.</p>
            @endif
        </div>
    </div>

    <!-- Add/Edit Printer Modal -->
    <div x-show="showAddPrinter || showEditPrinter" x-cloak class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4 py-8">
            <div class="fixed inset-0 bg-black/50" @click="showAddPrinter = false; showEditPrinter = false; editMode = false; editAction = ''"></div>
            <div class="relative bg-white dark:bg-slate-800 rounded-xl shadow-lg max-w-md w-full overflow-hidden"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100">
                <form :action="editMode ? editAction : '{{ route('settings.printers.store') }}'" method="POST" id="printerForm">
                    @csrf
                    <template x-if="editMode">@method('PUT')</template>
                    
                    <div class="p-6">
                        <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-4" x-text="editMode ? 'Edit Printer' : 'Tambah Printer'"></h3>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Nama Printer</label>
                                <input type="text" name="name" x-model="printerForm.name" required class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Tipe Koneksi</label>
                                <select name="connection_type" x-model="printerForm.connection_type" required class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
                                    <option value="browser">Browser Print (Default)</option>
                                    <option value="bluetooth">Bluetooth</option>
                                    <option value="network">Network (WiFi/LAN)</option>
                                    <option value="usb">USB</option>
                                </select>
                            </div>

                            <template x-if="printerForm.connection_type === 'network'">
                                <div class="grid grid-cols-2 gap-3">
                                    <div>
                                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">IP Address</label>
                                        <input type="text" name="ip_address" x-model="printerForm.ip_address" placeholder="192.168.1.100" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Port</label>
                                        <input type="number" name="port" x-model="printerForm.port" value="9100" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
                                    </div>
                                </div>
                            </template>

                            <template x-if="printerForm.connection_type === 'bluetooth'">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Nama Device Bluetooth</label>
                                    <input type="text" name="bluetooth_name" x-model="printerForm.bluetooth_name" placeholder="Contoh: Printer-Thermal-BT" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
                                </div>
                            </template>

                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Ukuran Kertas</label>
                                    <select name="paper_size" x-model="printerForm.paper_size" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
                                        <option value="58mm">58mm (Kecil)</option>
                                        <option value="80mm">80mm (Besar)</option>
                                    </select>
                                </div>
                                <div class="flex items-end">
                                    <label class="flex items-center cursor-pointer">
                                        <input type="checkbox" name="is_default" :checked="printerForm.is_default" class="sr-only peer">
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                                        <span class="ml-2 text-sm text-slate-700 dark:text-slate-300">Default</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex gap-3 p-6 border-t border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-700/50">
                        <button type="button" @click="showAddPrinter = false; showEditPrinter = false; editMode = false; editAction = ''" class="flex-1 px-4 py-2.5 bg-gray-100 dark:bg-slate-600 hover:bg-gray-200 dark:hover:bg-slate-500 text-slate-700 dark:text-slate-300 font-medium rounded-lg">Batal</button>
                        <button type="submit" class="flex-1 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Test Printer Modal -->
    <div x-show="testPrinterOpen" x-cloak class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4 py-8">
            <div class="fixed inset-0 bg-black/50" @click="testPrinterOpen = false"></div>
            <div class="relative bg-white dark:bg-slate-800 rounded-xl shadow-lg max-w-sm w-full overflow-hidden"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100">
                <div class="p-6">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-10 h-10 bg-emerald-100 dark:bg-emerald-900/30 rounded-full flex items-center justify-center">
                            <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path></svg>
                        </div>
                        <h3 class="text-lg font-semibold text-slate-900 dark:text-white">Test Printer</h3>
                    </div>
                    <p class="text-sm text-slate-500 dark:text-slate-400 mb-4">Cetak struk contoh untuk menguji printer Anda.</p>
                    <div class="overflow-x-auto mb-4">
                        <div id="test-print-preview" class="bg-white dark:bg-slate-700 rounded-lg p-3 font-mono text-xs text-slate-900 dark:text-slate-200 border border-gray-200 dark:border-slate-600" style="width: {{ ($printerSettings['printer_paper_size'] ?? '80mm') === '58mm' ? '58mm' : '80mm' }}; margin: 0 auto;">
                            @php
                                $storeLogo = \App\Services\SettingsService::get('store_logo', null);
                                $storeName = \App\Services\SettingsService::getStoreName($branch->id ?? null);
                                $showLogo = $printerSettings['printer_show_logo'] ?? true;
                                $printerLogo = $printerSettings['logo'] ?? null;
                                $activeLogo = $printerLogo ?: (!empty($storeLogo) ? asset('uploads/logo/' . $storeLogo) : null);
                                $isNarrow = ($printerSettings['printer_paper_size'] ?? '80mm') === '58mm';
                                $separator = $isNarrow ? str_repeat('=', 24) : str_repeat('=', 32);
                                $divider = $isNarrow ? str_repeat('-', 24) : str_repeat('-', 32);
                                $textAlign = $isNarrow ? 'text-xs' : 'text-sm';
                                $itemText = $isNarrow ? 'text-[10px]' : 'text-xs';
                                $logoMaxWidth = $isNarrow ? 'max-w-[50px]' : 'max-w-[80px]';
                                $logoMaxHeight = $isNarrow ? 'max-h-10' : 'max-h-12';
                            @endphp
                            @if($showLogo && !empty($activeLogo))
                                <div class="text-center mb-2">
                                    <img src="{{ $activeLogo }}" alt="Logo" class="mx-auto {{ $logoMaxHeight }} {{ $logoMaxWidth }} object-contain">
                                </div>
                            @else
                                <p class="text-center font-bold {{ $textAlign }} mb-1">{{ $storeName }}</p>
                            @endif
                            <p class="text-center {{ $itemText }} text-slate-500 mb-1 leading-tight">{{ $separator }}</p>
                            <div class="flex justify-between {{ $itemText }}"><span>Item 1</span><span>10.000</span></div>
                            <div class="flex justify-between {{ $itemText }}"><span>Item 2</span><span>15.000</span></div>
                            <p class="{{ $itemText }} text-slate-500 my-1 leading-tight text-center">{{ $divider }}</p>
                            <div class="flex justify-between font-bold {{ $itemText }}"><span>Total</span><span>25.000</span></div>
                            <p class="{{ $itemText }} text-slate-500 my-1 leading-tight text-center">{{ $separator }}</p>
                            <p class="text-center {{ $itemText }} mt-1 leading-tight">{{ $printerSettings['printer_footer_text'] ?? 'Terima kasih!' }}</p>
                        </div>
                    </div>
                    <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3 mb-4">
                        <p class="text-xs text-amber-700 dark:text-amber-400">
                            <svg class="w-3.5 h-3.5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 018 0z"></path></svg>
                            Pastikan printer sudah terhubung dan diset sebagai default. Tekan tombol di bawah untuk membuka dialog cetak browser.
                        </p>
                    </div>
                </div>
                <div class="flex gap-3 p-6 border-t border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-700/50">
                    <button type="button" @click="testPrinterOpen = false" class="flex-1 px-4 py-2.5 bg-gray-100 dark:bg-slate-600 hover:bg-gray-200 dark:hover:bg-slate-500 text-slate-700 dark:text-slate-300 font-medium rounded-lg">Tutup</button>
                    <button type="button" @click="window.print()" class="flex-1 px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-medium rounded-lg">
                        <svg class="w-4 h-4 inline mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path></svg>
                        Cetak Test
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
@media print {
    body * { visibility: hidden !important; }
    #test-print-preview, #test-print-preview * { visibility: visible !important; }
    #test-print-preview {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: {{ ($printerSettings['printer_paper_size'] ?? '80mm') === '58mm' ? '58mm' : '80mm' }} !important;
        border: none !important;
        box-shadow: none !important;
        background: white !important;
        color: black !important;
        padding: 10px !important;
        font-size: 12px !important;
    }
    @page { margin: 0; size: {{ ($printerSettings['printer_paper_size'] ?? '80mm') === '58mm' ? '58mm' : '80mm' }} auto; }
}
</style>
@endpush

<script>
function editPrinter(id, printer) {
    const alpineData = document.querySelector('[x-data]').__x.$data;
    alpineData.editMode = true;
    alpineData.showEditPrinter = true;
    alpineData.editAction = "{{ url('settings/printers') }}/" + id;
    alpineData.printerForm = {
        id: printer.id,
        name: printer.name,
        connection_type: printer.connection_type,
        ip_address: printer.ip_address || '',
        port: printer.port || 9100,
        bluetooth_name: printer.bluetooth_name || '',
        paper_size: printer.paper_size,
        is_default: printer.is_default
    };
}

async function doTestPrint() {
    const alpineData = document.querySelector('[x-data]').__x.$data;
    const printerId = alpineData.selectedPrinter;
    
    // If no printer selected, use browser print
    if (!printerId) {
        window.print();
        return;
    }
    
    // Call API
    try {
        const response = await fetch('{{ route('settings.test-print') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ printer_id: printerId })
        });
        
        const result = await response.json();
        
        if (result.success) {
            if (result.method === 'browser' && result.script) {
                eval(result.script);
            } else if (result.method === 'bluetooth' && result.script) {
                eval(result.script);
            } else {
                alert(result.message || 'Print berhasil!');
            }
        } else {
            alert('Gagal print: ' + (result.message || 'Unknown error'));
        }
    } catch (error) {
        console.error('Print error:', error);
        // Fallback to browser print
        window.print();
    }
}
</script>
@endsection