@extends('layouts.admin_lbb')

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

@section('content')
<!-- Branding Form -->
<div class="card mb-4">
    <div class="card-header">
        <i class="bi bi-gear me-2"></i>
        Pengaturan LBB
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-lg-8 col-12 order-1 order-lg-1">
                <form action="{{ route('admin.settings.update-branding') }}" method="POST" enctype="multipart/form-data" id="brandingForm">
                    @csrf
                    <!-- Informasi LBB & Branding (Combined) -->
                    <div class="row mb-5">
                        <div class="col-12">
                            <h5 class="fw-bold mb-4 pb-2" style="border-bottom: 2px solid var(--accent);">
                                <i class="bi bi-building me-2"></i>
                                Informasi LBB & Branding
                            </h5>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Logo LBB</label>
                            <div class="border rounded p-3 text-center bg-light" style="border-style: dashed;">
                                <div class="mb-2" id="logoPreviewContainer">
                                    @if($lbb->logo_url)
                                    <img id="logoPreview" src="{{ $lbb->logo_url }}" alt="Logo Preview" style="width: 80px; height: 80px; object-fit: contain; display: block; margin: 0 auto;">
                                    <div id="logoPlaceholder" class="user-avatar mx-auto" style="width: 80px; height: 80px; font-size: 2rem; display: none;">
                                        <i class="bi bi-building"></i>
                                    </div>
                                    @else
                                    <img id="logoPreview" src="" alt="Logo Preview" style="width: 80px; height: 80px; object-fit: contain; display: none; margin: 0 auto;">
                                    <div id="logoPlaceholder" class="user-avatar mx-auto" style="width: 80px; height: 80px; font-size: 2rem; display: flex; align-items: center; justify-content: center;">
                                        <i class="bi bi-building"></i>
                                    </div>
                                    @endif
                                </div>
                                <input type="file" name="logo" class="form-control form-control-sm" accept="image/*" id="logoUpload">
                                <small class="text-muted">Format: PNG, JPG, WEBP. Maksimal 2MB. Rekomendasi: 200x200px</small>
                            </div>

                            <label class="form-label mt-2">Nama LBB</label>
                            <input type="text" name="display_name" class="form-control" value="{{ $lbbData['display_name'] }}" placeholder="Masukkan nama LBB" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Warna Utama</label>
                            <div class="input-group">
                                <input type="color" name="theme_primary_color" class="form-control form-control-color" value="{{ $lbbData['primary_color'] }}" style="width: 60px;" required>
                                <input type="text" name="theme_primary_color_text" class="form-control" value="{{ $lbbData['primary_color'] }}" readonly>
                            </div>

                            <label class="form-label">Warna Sekunder</label>
                            <div class="input-group">
                                <input type="color" name="theme_secondary_color" class="form-control form-control-color" value="{{ $lbbData['secondary_color'] }}" style="width: 60px;" required>
                                <input type="text" name="theme_secondary_color_text" class="form-control" value="{{ $lbbData['secondary_color'] }}" readonly>
                            </div>

                            <label class="form-label">Warna Aksen</label>
                            <div class="input-group">
                                <input type="color" name="theme_accent_color" class="form-control form-control-color" value="{{ $lbbData['accent_color'] }}" style="width: 60px;">
                                <input type="text" name="theme_accent_color_text" class="form-control" value="{{ $lbbData['accent_color'] }}" readonly>
                            </div>
                            
                            <label class="form-label">Warna Font</label>
                            <div class="input-group">
                                <input type="color" name="theme_font_color" class="form-control form-control-color" value="{{ $lbbData['font_color'] ?? '#333333' }}" style="width: 60px;">
                                <input type="text" name="theme_font_color_text" class="form-control" value="{{ $lbbData['font_color'] ?? '#333333' }}" readonly>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Submit Button -->
                    <div class="row">
                            <div class="col-12">
                                <div class="d-flex justify-content-end">
                                    <button type="submit" class="btn btn-success" id="saveBrandingBtn">
                                        <i class="bi bi-check-lg me-2"></i>
                                        Simpan Pengaturan Branding
                                    </button>
                                </div>
                            </div>
                    </div>
                </form>
            </div>
            <div class="col-lg-4 col-12 order-2 order-lg-2 mt-4 mt-lg-0">
                <!-- Security Form -->
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="fw-bold">
                        <i class="bi bi-shield-lock me-2" style="color: var(--secondary);"></i>
                            Ubah Password
                        </h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('admin.settings.update-password') }}" method="POST" id="passwordForm">
                            @csrf
                            @if(session('error'))
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    {{ session('error') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif
                            <div class="mb-3">
                                <label class="form-label">Password Lama <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="bi bi-key"></i>
                                    </span>
                                    <input type="password" class="form-control" name="current_password" id="current_password" placeholder="Masukkan password lama" required>
                                    <span class="input-group-text toggle-password" data-target="current_password">
                                        <i class="bi bi-eye"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Password Baru <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="bi bi-key-fill"></i>
                                    </span>
                                    <input type="password" class="form-control" name="new_password" id="new_password" placeholder="Masukkan password baru" required>
                                    <span class="input-group-text toggle-password" data-target="new_password">
                                        <i class="bi bi-eye"></i>
                                    </span>
                                </div>
                                <div id="passwordLengthError" class="text-danger small mt-1" style="display: none;">
                                    Password baru minimal 8 karakter!
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Konfirmasi Password Baru <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="bi bi-key-fill"></i>
                                    </span>
                                    <input type="password" class="form-control" name="confirm_password" id="confirm_password" placeholder="Ulangi password baru" required>
                                    <span class="input-group-text toggle-password" data-target="confirm_password">
                                        <i class="bi bi-eye"></i>
                                    </span>
                                </div>
                                <div id="passwordMatchError" class="text-danger small mt-1" style="display: none;">
                                    Password baru dan Konfirmasi Password baru tidak sama!
                                </div>
                            </div>
                            <button type="submit" class="btn btn-warning w-100 mt-5" id="updatePasswordBtn">
                                <i class="bi bi-key-fill me-1"></i>
                                Ubah Password
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Logo preview functionality
    const logoUpload = document.getElementById('logoUpload');
    const preview = document.getElementById('logoPreview');
    const placeholder = document.getElementById('logoPlaceholder');
    
    if (logoUpload) {
        logoUpload.addEventListener('change', function(e) {
            const file = e.target.files[0];
            
            if (file) {
                // Validate file type
                if (!file.type.match('image.*')) {
                    AppAlert.warning('Mohon pilih file gambar (WEBP, PNG, JPG, atau JPEG).');
                    this.value = '';
                    return;
                }
                
                // Validate file size (2MB)
                if (file.size > 2 * 1024 * 1024) {
                    AppAlert.warning('Ukuran file maksimal 2MB.');
                    this.value = '';
                    return;
                }
                
                // Read and preview image
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                    placeholder.style.display = 'none';
                };
                reader.readAsDataURL(file);
            } else {
                // Reset to placeholder if no file selected
                preview.src = '';
                preview.style.display = 'none';
                placeholder.style.display = 'flex';
            }
        });
    }
    
    // Color picker sync
    const colorPickers = [
        { picker: 'input[name="theme_primary_color"]', text: 'input[name="theme_primary_color_text"]' },
        { picker: 'input[name="theme_secondary_color"]', text: 'input[name="theme_secondary_color_text"]' },
        { picker: 'input[name="theme_accent_color"]', text: 'input[name="theme_accent_color_text"]' },
        { picker: 'input[name="theme_font_color"]', text: 'input[name="theme_font_color_text"]' }
    ];
    
    colorPickers.forEach(function(pair) {
        const picker = document.querySelector(pair.picker);
        const text = document.querySelector(pair.text);
        
        if (picker && text) {
            picker.addEventListener('input', function() {
                text.value = this.value;
            });
        }
    });

    // Branding form submission with confirmation
    const brandingForm = document.getElementById('brandingForm');
    const saveBrandingBtn = document.getElementById('saveBrandingBtn');
    
    if (brandingForm && saveBrandingBtn) {
        brandingForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            AppAlert.update(
                'Simpan Pengaturan Branding',
                'Apakah Anda yakin ingin menyimpan pengaturan branding ini?',
                function() {
                    brandingForm.submit();
                }
            );
        });
    }

    // Password form validation with confirmation
    const passwordForm = document.getElementById('passwordForm');
    const newPasswordInput = document.getElementById('new_password');
    const confirmPasswordInput = document.getElementById('confirm_password');
    const passwordMatchError = document.getElementById('passwordMatchError');
    const passwordLengthError = document.getElementById('passwordLengthError');
    const updatePasswordBtn = document.getElementById('updatePasswordBtn');
    
    if (passwordForm && newPasswordInput && confirmPasswordInput && passwordMatchError) {
        // Check password length on input
        newPasswordInput.addEventListener('input', function() {
            if (this.value.length > 0 && this.value.length < 8) {
                passwordLengthError.style.display = 'block';
                newPasswordInput.classList.add('is-invalid');
            } else {
                passwordLengthError.style.display = 'none';
                newPasswordInput.classList.remove('is-invalid');
            }
        });

        // Password form submission with confirmation
        passwordForm.addEventListener('submit', function(e) {
            const newPassword = newPasswordInput.value;
            const confirmPassword = confirmPasswordInput.value;

            // Check password length
            if (newPassword.length < 8) {
                e.preventDefault();
                passwordLengthError.style.display = 'block';
                newPasswordInput.classList.add('is-invalid');
                return;
            }

            // Check password match
            if (newPassword != confirmPassword) {
                e.preventDefault();
                passwordMatchError.style.display = 'block';
                confirmPasswordInput.classList.add('is-invalid');
                return;
            }

            // Show confirmation dialog
            e.preventDefault();
            AppAlert.update(
                'Ubah Password',
                'Apakah Anda yakin ingin mengubah password Anda?',
                function() {
                    passwordForm.submit();
                }
            );
        });

        // Clear errors when typing
        confirmPasswordInput.addEventListener('input', function() {
            passwordMatchError.style.display = 'none';
            confirmPasswordInput.classList.remove('is-invalid');
        });
    }

    // Toggle password visibility
    const togglePasswordButtons = document.querySelectorAll('.toggle-password');
    togglePasswordButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            const targetId = this.getAttribute('data-target');
            const passwordInput = document.getElementById(targetId);
            const icon = this.querySelector('i');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                icon.classList.remove('bi-eye');
                icon.classList.add('bi-eye-slash');
            } else {
                passwordInput.type = 'password';
                icon.classList.remove('bi-eye-slash');
                icon.classList.add('bi-eye');
            }
        });
    });
});
</script>

@endsection