@extends('layouts.app')

@section('title', 'Manajemen Akun Brand')

@section('content')
    <div class="container mx-auto p-4">
        <header class="flex flex-wrap justify-between items-center mb-6">
            <div>
                <h1 class="text-3xl sm:text-4xl font-bold text-gray-900">Manajemen Akun Brand</h1>
                <p class="text-gray-600 mt-2">Pusat data untuk semua akun digital brand Anda.</p>
            </div>
            <div class="flex items-center gap-4">
                <!-- Tombol Show All Passwords -->
                <button id="toggle-all-passwords"
                    class="flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-green-600 rounded-md hover:bg-green-700 transition-colors">
                    <svg id="toggle-icon" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                    </svg>
                    <span id="toggle-text">Show All Passwords</span>
                </button>
                <button id="open-change-password"
                    class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">Ganti Password</button>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit"
                        class="px-4 py-2 text-sm font-semibold text-white bg-red-600 rounded-md hover:bg-red-700">
                        Logout
                    </button>
                </form>
            </div>
        </header>

        <!-- Brand Tabs -->
        <div class="mb-6">
            <div class="flex flex-wrap justify-center gap-2" id="tab-buttons">
                @foreach ($brands as $brand)
                    <button data-brand-id="{{ $brand->id }}"
                        class="tab-btn {{ $brand->id == $currentBrandId ? 'active' : '' }} text-sm sm:text-base font-medium py-2 px-4 rounded-lg border-2 border-transparent transition-all duration-300">
                        {{ $brand->name }}
                    </button>
                @endforeach
            </div>
        </div>

        <!-- Content Area -->
        <div id="content-area" class="space-y-6">
            @php
                $categories = [
                    'gmail' => [
                        'title' => 'Akun Login Chrome (Gmail)',
                        'fields' => ['tujuan', 'email', 'password', 'email_recovery', 'phone_recovery', 'catatan'],
                        'headers' => [
                            'Tujuan',
                            'Email',
                            'Password',
                            'Email Recovery',
                            'HP Recovery',
                            'Catatan',
                            'Aksi',
                        ],
                    ],
                    'ecommerce' => [
                        'title' => 'Akun E-Commerce',
                        'fields' => [
                            'platform',
                            'nama_toko',
                            'email',
                            'password',
                            'email_recovery',
                            'phone_recovery',
                            'catatan',
                        ],
                        'headers' => [
                            'Platform',
                            'Nama Toko',
                            'Email/Username',
                            'Password',
                            'Email Recovery',
                            'HP Recovery',
                            'Catatan',
                            'Aksi',
                        ],
                    ],
                    'sosmed' => [
                        'title' => 'Akun Sosial Media',
                        'fields' => [
                            'platform',
                            'username',
                            'email',
                            'password',
                            'email_recovery',
                            'phone_recovery',
                            'catatan',
                        ],
                        'headers' => [
                            'Platform',
                            'Username',
                            'Email/HP',
                            'Password',
                            'Email Recovery',
                            'HP Recovery',
                            'Catatan',
                            'Aksi',
                        ],
                    ],
                    'iklan' => [
                        'title' => 'Akun Iklan',
                        'fields' => [
                            'platform',
                            'id_akun',
                            'email',
                            'password',
                            'email_recovery',
                            'phone_recovery',
                            'catatan',
                        ],
                        'headers' => [
                            'Platform',
                            'ID Akun',
                            'Email Login',
                            'Password',
                            'Email Recovery',
                            'HP Recovery',
                            'Catatan',
                            'Aksi',
                        ],
                    ],
                    'lainnya' => [
                        'title' => 'Akun Lainnya',
                        'fields' => ['platform', 'email', 'password', 'email_recovery', 'phone_recovery', 'catatan'],
                        'headers' => [
                            'Platform',
                            'Email/Username',
                            'Password',
                            'Email Recovery',
                            'HP Recovery',
                            'Catatan',
                            'Aksi',
                        ],
                    ],
                ];
            @endphp

            @foreach ($categories as $categoryKey => $category)
                <div class="bg-white p-4 rounded-xl shadow-md" data-category="{{ $categoryKey }}">
                    <div class="flex justify-between items-center mb-3">
                        <h2 class="text-xl font-semibold text-gray-800">{{ $category['title'] }}</h2>
                        <button onclick="openModal('add', {{ $currentBrandId }}, '{{ $categoryKey }}')"
                            class="px-3 py-1 text-sm text-white bg-blue-500 rounded-md hover:bg-blue-600">
                            + Tambah
                        </button>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    @foreach ($category['headers'] as $header)
                                        <th
                                            class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            {{ $header }}
                                        </th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $categoryAccounts = $accounts->where('category', $categoryKey);
                                @endphp

                                @if ($categoryAccounts->isEmpty())
                                    <tr>
                                        <td colspan="{{ count($category['headers']) }}"
                                            class="text-center py-3 text-gray-500">
                                            Belum ada data.
                                        </td>
                                    </tr>
                                @else
                                    @foreach ($categoryAccounts as $account)
                                        <tr>
                                            @foreach ($category['fields'] as $field)
                                                <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-600">
                                                    @if ($field === 'password')
                                                        <div class="flex items-center gap-2">
                                                            <span class="password-field">{{ $account->$field }}</span>
                                                            <button onclick="window.togglePassword(this)"
                                                                class="p-1 text-gray-400 hover:text-blue-500">
                                                                <svg class="h-5 w-5 eye-icon" fill="none"
                                                                    viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                                        stroke-width="2"
                                                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                                        stroke-width="2"
                                                                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                                                </svg>
                                                            </button>
                                                            <button
                                                                onclick="window.copyToClipboard('{{ addslashes($account->$field) }}')"
                                                                class="p-1 text-gray-400 hover:text-blue-500">
                                                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                                                                    stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                                        stroke-width="2"
                                                                        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                                                </svg>
                                                            </button>
                                                        </div>
                                                    @else
                                                        {{ $account->$field ?? '' }}
                                                    @endif
                                                </td>
                                            @endforeach
                                            <td class="px-4 py-2 whitespace-nowrap text-sm font-medium">
                                                <button
                                                    onclick="openModal('edit', {{ $currentBrandId }}, '{{ $categoryKey }}', {{ $account->id }})"
                                                    class="text-indigo-600 hover:text-indigo-900 mr-3">
                                                    Edit
                                                </button>
                                                <button onclick="deleteAccount({{ $account->id }})"
                                                    class="text-red-600 hover:text-red-900">
                                                    Hapus
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Add/Edit Modal -->
    <div id="account-modal" class="modal-overlay">
        <div class="modal-content">
            <h3 id="modal-title" class="text-2xl font-bold mb-4">Tambah Akun Baru</h3>
            <form id="account-form" class="space-y-4">
                @csrf
                <input type="hidden" id="modal-account-id">
                <input type="hidden" id="modal-brand-id" name="brand_id">
                <input type="hidden" id="modal-category" name="category">
                <input type="hidden" id="modal-method" value="POST">

                <div id="form-field-tujuan" style="display:none;">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tujuan</label>
                    <input type="text" id="form-tujuan" name="tujuan" class="w-full px-3 py-2 border rounded-md">
                </div>

                <div id="form-field-platform" style="display:none;">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Platform</label>
                    <input type="text" id="form-platform" name="platform" class="w-full px-3 py-2 border rounded-md">
                </div>

                <div id="form-field-nama_toko" style="display:none;">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nama Toko</label>
                    <input type="text" id="form-nama_toko" name="nama_toko"
                        class="w-full px-3 py-2 border rounded-md">
                </div>

                <div id="form-field-username" style="display:none;">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
                    <input type="text" id="form-username" name="username" class="w-full px-3 py-2 border rounded-md">
                </div>

                <div id="form-field-id_akun" style="display:none;">
                    <label class="block text-sm font-medium text-gray-700 mb-1">ID Akun</label>
                    <input type="text" id="form-id_akun" name="id_akun" class="w-full px-3 py-2 border rounded-md">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Email / Username Login</label>
                    <input type="text" id="form-email" name="email" class="w-full px-3 py-2 border rounded-md">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
                    <input type="text" id="form-password" name="password" class="w-full px-3 py-2 border rounded-md">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Email Recovery</label>
                    <input type="text" id="form-email_recovery" name="email_recovery"
                        class="w-full px-3 py-2 border rounded-md">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">HP Recovery</label>
                    <input type="text" id="form-phone_recovery" name="phone_recovery"
                        class="w-full px-3 py-2 border rounded-md">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Catatan</label>
                    <textarea id="form-catatan" name="catatan" class="w-full px-3 py-2 border rounded-md" rows="3"></textarea>
                </div>

                <div class="flex justify-end gap-4 pt-4">
                    <button type="button" onclick="closeModal()"
                        class="px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300">Batal</button>
                    <button type="submit"
                        class="px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700">Simpan</button>
                </div>
            </form>
        </div>
    </div>

    @push('scripts')
        <script>
            let allPasswordsVisible = false;
            const categoryFields = {
                gmail: ['tujuan'],
                ecommerce: ['platform', 'nama_toko'],
                sosmed: ['platform', 'username'],
                iklan: ['platform', 'id_akun'],
                lainnya: ['platform']
            };

            // Toggle semua password
            document.getElementById('toggle-all-passwords').addEventListener('click', function() {
                allPasswordsVisible = !allPasswordsVisible;

                window.toggleAllPasswords(allPasswordsVisible);

                const toggleText = document.getElementById('toggle-text');
                const toggleIcon = document.getElementById('toggle-icon');
                const button = document.getElementById('toggle-all-passwords');

                if (allPasswordsVisible) {
                    toggleText.textContent = 'Hide All Passwords';
                    toggleIcon.innerHTML =
                        `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a10.05 10.05 0 015.001-6.175M14.75 14.75a3 3 0 10-4.5-4.5m4.5 4.5l-4.5-4.5m0 0L9.25 9.25" />`;
                    button.classList.remove('bg-green-600', 'hover:bg-green-700');
                    button.classList.add('bg-yellow-600', 'hover:bg-yellow-700');
                } else {
                    toggleText.textContent = 'Show All Passwords';
                    toggleIcon.innerHTML =
                        `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />`;
                    button.classList.remove('bg-yellow-600', 'hover:bg-yellow-700');
                    button.classList.add('bg-green-600', 'hover:bg-green-700');
                }
            });

            // Open Modal
            function openModal(mode, brandId, category, accountId = null) {
                document.getElementById('account-form').reset();
                document.getElementById('modal-brand-id').value = brandId;
                document.getElementById('modal-category').value = category;

                const allFields = ['tujuan', 'platform', 'nama_toko', 'username', 'id_akun'];

                // Hide all conditional fields
                allFields.forEach(field => {
                    const el = document.getElementById(`form-field-${field}`);
                    if (el) el.style.display = 'none';
                });

                // Show relevant fields
                if (categoryFields[category]) {
                    categoryFields[category].forEach(field => {
                        const el = document.getElementById(`form-field-${field}`);
                        if (el) el.style.display = 'block';
                    });
                }

                if (mode === 'edit') {
                    document.getElementById('modal-title').textContent = 'Edit Akun';
                    document.getElementById('modal-account-id').value = accountId;
                    document.getElementById('modal-method').value = 'PUT';

                    // Fetch account data
                    fetch(`/accounts/${accountId}/edit`, {
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            // Fill form with account data
                            Object.keys(data).forEach(key => {
                                const input = document.getElementById(`form-${key}`);
                                if (input) input.value = data[key] || '';
                            });
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            window.showToast('Gagal memuat data akun.', true);
                        });
                } else {
                    document.getElementById('modal-title').textContent = 'Tambah Akun Baru';
                    document.getElementById('modal-account-id').value = '';
                    document.getElementById('modal-method').value = 'POST';
                }

                document.getElementById('account-modal').classList.add('active');
            }

            // Close Modal
            function closeModal() {
                document.getElementById('account-modal').classList.remove('active');
            }

            // Submit Form
            document.getElementById('account-form').addEventListener('submit', function(e) {
                e.preventDefault();

                const formData = new FormData(this);
                const accountId = document.getElementById('modal-account-id').value;
                const method = document.getElementById('modal-method').value;

                let url = '{{ route('accounts.store') }}';
                if (method === 'PUT') {
                    url = `/accounts/${accountId}`;
                    formData.append('_method', 'PUT');
                }

                fetch(url, {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            window.showToast(data.message);
                            closeModal();
                            // Reload page to show updated data
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        } else {
                            window.showToast(data.message || 'Terjadi kesalahan.', true);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        window.showToast('Terjadi kesalahan saat menyimpan data.', true);
                    });
            });

            // Delete Account
            function deleteAccount(accountId) {
                if (!confirm('Apakah Anda yakin ingin menghapus akun ini?')) return;

                fetch(`/accounts/${accountId}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            window.showToast(data.message);

                            // Hapus row dari tabel langsung
                            const row = document.querySelector(`button[onclick="deleteAccount(${accountId})"]`).closest(
                                'tr');
                            if (row) row.remove();
                        } else {
                            window.showToast(data.message || 'Gagal menghapus akun.', true);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        window.showToast('Terjadi kesalahan saat menghapus data.', true);
                    });
            }

            // Tab switching
            document.getElementById('tab-buttons').addEventListener('click', (e) => {
                const button = e.target.closest('.tab-btn');
                if (button) {
                    e.preventDefault();
                    const brandId = button.dataset.brandId;
                    window.location.href = '{{ route('accounts.index') }}' + '?brand_id=' + brandId;
                }
            });
        </script>
    @endpush
@endsection