<?php $__env->startSection('title', 'Platform Settings'); ?>
<?php $__env->startSection('header_title', 'Platform & System Configuration'); ?>

<?php $__env->startSection('content'); ?>
    <style>
        .settings-nav {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
            padding-bottom: 0.5rem;
            overflow-x: auto;
        }
        .settings-tab-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 0.95rem;
            font-weight: 600;
            padding: 0.6rem 1.2rem;
            border-radius: 8px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        .settings-tab-btn:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.05);
        }
        .settings-tab-btn.active {
            color: #fff;
            background: var(--primary);
        }
        .tab-pane {
            display: none;
        }
        .tab-pane.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 24px;
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: #334155;
            transition: .3s;
            border-radius: 24px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .3s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background-color: var(--success);
        }
        input:checked + .slider:before {
            transform: translateX(24px);
        }
        .setting-toggle-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
    </style>

    <!-- Navigation Tabs -->
    <div class="settings-nav">
        <button class="settings-tab-btn active" onclick="switchTab('general', this)">
            <i class="fa-solid fa-sliders"></i> General & Branding
        </button>
        <button class="settings-tab-btn" onclick="switchTab('payment', this)">
            <i class="fa-solid fa-credit-card"></i> Payment Gateway
        </button>
        <button class="settings-tab-btn" onclick="switchTab('artryon', this)">
            <i class="fa-solid fa-wand-magic-sparkles"></i> 3D AR & Try-On
        </button>
        <button class="settings-tab-btn" onclick="switchTab('mobile', this)">
            <i class="fa-solid fa-mobile-screen"></i> Mobile App & Push
        </button>
        <button class="settings-tab-btn" onclick="switchTab('smtp', this)">
            <i class="fa-solid fa-envelope"></i> SMTP & Mail
        </button>
        <button class="settings-tab-btn" onclick="switchTab('security', this)">
            <i class="fa-solid fa-shield-halved"></i> Admin Account
        </button>
    </div>

    <!-- Main Form for Platform Settings -->
    <form action="<?php echo e(route('admin.settings.update')); ?>" method="POST" enctype="multipart/form-data">
        <?php echo csrf_field(); ?>

        <!-- TAB 1: General & Branding -->
        <div id="tab-general" class="tab-pane active">
            <div class="card" style="max-width: 800px;">
                <h3 style="margin-bottom: 1.2rem;"><i class="fa-solid fa-palette" style="color: var(--primary);"></i> General Platform Settings</h3>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div>
                        <label>Application / Brand Name *</label>
                        <input type="text" name="app_name" value="<?php echo e($settings->app_name ?? 'MyOpticals'); ?>" required>
                    </div>
                    <div>
                        <label>Currency Symbol & Code</label>
                        <div style="display: grid; grid-template-columns: 80px 1fr; gap: 8px;">
                            <input type="text" name="currency_symbol" value="<?php echo e($settings->currency_symbol ?? '₹'); ?>" placeholder="₹">
                            <input type="text" name="currency_code" value="<?php echo e($settings->currency_code ?? 'INR'); ?>" placeholder="INR">
                        </div>
                    </div>
                </div>

                <div style="margin-top: 1rem;">
                    <label>Platform Brand Logo</label>
                    <div style="display: flex; align-items: center; gap: 16px; margin-top: 6px;">
                        <?php if($settings->app_logo): ?>
                            <img src="<?php echo e($settings->app_logo); ?>" alt="Logo" style="height: 48px; border-radius: 8px; background: #000; padding: 4px; border: 1px solid var(--border);">
                        <?php endif; ?>
                        <input type="file" name="app_logo" accept="image/*" style="padding: 0.5rem;">
                    </div>
                </div>

                <hr style="border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0;">

                <h4 style="margin-bottom: 1rem; color: #fff;"><i class="fa-solid fa-headset" style="color: var(--primary);"></i> Support Contact Info</h4>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div>
                        <label>Support Email Address</label>
                        <input type="email" name="contact_email" value="<?php echo e($settings->contact_email ?? 'support@myopticals.com'); ?>">
                    </div>
                    <div>
                        <label>Support Phone / WhatsApp</label>
                        <input type="text" name="contact_phone" value="<?php echo e($settings->contact_phone ?? '+91 9876543210'); ?>">
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
                    <div>
                        <label>Privacy Policy URL</label>
                        <input type="text" name="privacy_policy_url" value="<?php echo e($settings->privacy_policy_url ?? url('/privacy-policy')); ?>">
                    </div>
                    <div>
                        <label>Terms & Conditions URL</label>
                        <input type="text" name="terms_conditions_url" value="<?php echo e($settings->terms_conditions_url ?? url('/terms-and-conditions')); ?>">
                    </div>
                </div>

                <button type="submit" class="btn btn-primary" style="margin-top: 1.5rem;">
                    <i class="fa-solid fa-floppy-disk"></i> Save General Settings
                </button>
            </div>
        </div>

        <!-- TAB 2: Payment Gateway (Razorpay) -->
        <div id="tab-payment" class="tab-pane">
            <div class="card" style="max-width: 800px;">
                <h3 style="margin-bottom: 1.2rem;"><i class="fa-solid fa-credit-card" style="color: var(--primary);"></i> Razorpay Payment Gateway</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem;">
                    Configure Razorpay API credentials for vendor store subscriptions and automatic renewals.
                </p>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div>
                        <label>Razorpay Key ID *</label>
                        <input type="text" name="razorpay_key_id" value="<?php echo e($settings->razorpay_key_id); ?>" placeholder="rzp_test_...">
                    </div>
                    <div>
                        <label>Razorpay Key Secret *</label>
                        <input type="password" name="razorpay_key_secret" value="<?php echo e($settings->razorpay_key_secret); ?>" placeholder="Enter secret key">
                    </div>
                </div>

                <div style="background: var(--card-inner); padding: 1rem; border-radius: 12px; border: 1px solid var(--border); margin-top: 1.5rem;">
                    <span style="font-size: 0.85rem; color: var(--text-muted); display: block; margin-bottom: 4px;">Razorpay Webhook URL (Paste into Razorpay Dashboard &rarr; Settings &rarr; Webhooks):</span>
                    <code style="color: var(--accent); font-size: 0.9rem;"><?php echo e(url('/api/v1/payments/webhook')); ?></code>
                </div>

                <button type="submit" class="btn btn-primary" style="margin-top: 1.5rem;">
                    <i class="fa-solid fa-floppy-disk"></i> Save Payment Settings
                </button>
            </div>
        </div>

        <!-- TAB 3: 3D AR Try-On & Virtual Engine -->
        <div id="tab-artryon" class="tab-pane">
            <div class="card" style="max-width: 800px;">
                <h3 style="margin-bottom: 1.2rem;"><i class="fa-solid fa-wand-magic-sparkles" style="color: var(--primary);"></i> 3D AR & Simulator Configuration</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem;">
                    Control augmented reality virtual try-on engines globally across the mobile apps and web landing showcase.
                </p>

                <div class="setting-toggle-row">
                    <div>
                        <strong style="color: #fff; display: block; font-size: 0.95rem;">Enable 3D AR Eyewear Virtual Try-On</strong>
                        <span style="color: var(--text-muted); font-size: 0.85rem;">Allow customers to try on glasses live via front camera or face mesh simulation.</span>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" name="enable_ar_tryon" value="1" <?php echo e($settings->enable_ar_tryon ? 'checked' : ''); ?>>
                        <span class="slider"></span>
                    </label>
                </div>

                <div class="setting-toggle-row">
                    <div>
                        <strong style="color: #fff; display: block; font-size: 0.95rem;">Enable Contact Lens Iris Colorizer</strong>
                        <span style="color: var(--text-muted); font-size: 0.85rem;">Enable real-time shader overlay for simulating colored prescription and cosmetic lenses.</span>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" name="enable_iris_colorizer" value="1" <?php echo e($settings->enable_iris_colorizer ? 'checked' : ''); ?>>
                        <span class="slider"></span>
                    </label>
                </div>

                <button type="submit" class="btn btn-primary" style="margin-top: 1.5rem;">
                    <i class="fa-solid fa-floppy-disk"></i> Save AR Controls
                </button>
            </div>
        </div>

        <!-- TAB 4: Mobile App & Push Notifications -->
        <div id="tab-mobile" class="tab-pane">
            <div class="card" style="max-width: 800px;">
                <h3 style="margin-bottom: 1.2rem;"><i class="fa-solid fa-mobile-screen" style="color: var(--primary);"></i> Mobile App Versions & Push Notifications</h3>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div>
                        <label>Android App Version (e.g. 1.0.0)</label>
                        <input type="text" name="app_version_android" value="<?php echo e($settings->app_version_android); ?>">
                    </div>
                    <div>
                        <label>iOS App Version (e.g. 1.0.0)</label>
                        <input type="text" name="app_version_ios" value="<?php echo e($settings->app_version_ios); ?>">
                    </div>
                </div>

                <div class="setting-toggle-row" style="margin-top: 1rem;">
                    <div>
                        <strong style="color: #fff; display: block; font-size: 0.95rem;">Enforce Mandatory App Update (Force Update)</strong>
                        <span style="color: var(--text-muted); font-size: 0.85rem;">Block users on older versions until they update through the Play Store / App Store.</span>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" name="force_update" value="1" <?php echo e($settings->force_update ? 'checked' : ''); ?>>
                        <span class="slider"></span>
                    </label>
                </div>

                <div style="margin-top: 1.5rem;">
                    <label>Firebase Cloud Messaging (FCM) Server Key / Authorization Key</label>
                    <textarea name="fcm_server_key" rows="2" placeholder="AAAA... Firebase Legacy Server Key or FCM v1 Bearer Token"><?php echo e($settings->fcm_server_key); ?></textarea>
                </div>

                <button type="submit" class="btn btn-primary" style="margin-top: 1.5rem;">
                    <i class="fa-solid fa-floppy-disk"></i> Save App & Push Settings
                </button>
            </div>
        </div>

        <!-- TAB 5: SMTP & Mail Server -->
        <div id="tab-smtp" class="tab-pane">
            <div class="card" style="max-width: 800px;">
                <h3 style="margin-bottom: 1.2rem;"><i class="fa-solid fa-envelope" style="color: var(--primary);"></i> Mail & SMTP Server Configuration</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem;">
                    Configure outgoing SMTP server for transactional emails, password reset OTPs, and invoice notifications.
                </p>

                <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 1rem;">
                    <div>
                        <label>SMTP Host</label>
                        <input type="text" name="mail_host" value="<?php echo e($settings->mail_host); ?>" placeholder="smtp.mailtrap.io or smtp.gmail.com">
                    </div>
                    <div>
                        <label>SMTP Port</label>
                        <input type="text" name="mail_port" value="<?php echo e($settings->mail_port ?? '587'); ?>" placeholder="587">
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
                    <div>
                        <label>SMTP Username</label>
                        <input type="text" name="mail_username" value="<?php echo e($settings->mail_username); ?>" placeholder="username@domain.com">
                    </div>
                    <div>
                        <label>SMTP Password</label>
                        <input type="password" name="mail_password" value="<?php echo e($settings->mail_password); ?>" placeholder="Password">
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
                    <div>
                        <label>From Email Address</label>
                        <input type="email" name="mail_from_address" value="<?php echo e($settings->mail_from_address ?? 'noreply@myopticals.com'); ?>">
                    </div>
                    <div>
                        <label>From Sender Name</label>
                        <input type="text" name="mail_from_name" value="<?php echo e($settings->mail_from_name ?? 'MyOpticals Platform'); ?>">
                    </div>
                </div>

                <button type="submit" class="btn btn-primary" style="margin-top: 1.5rem;">
                    <i class="fa-solid fa-floppy-disk"></i> Save SMTP Configuration
                </button>
            </div>
        </div>
    </form>

    <!-- TAB 6: SuperAdmin Security & Profile (Separate Form) -->
    <div id="tab-security" class="tab-pane">
        <div class="card" style="max-width: 700px;">
            <form action="<?php echo e(route('admin.settings.profile')); ?>" method="POST">
                <?php echo csrf_field(); ?>
                <h3 style="margin-bottom: 1.2rem;"><i class="fa-solid fa-user-shield" style="color: var(--primary);"></i> SuperAdmin Profile & Security</h3>

                <div>
                    <label>Administrator Name *</label>
                    <input type="text" name="admin_name" value="<?php echo e($admin->name); ?>" required>
                </div>

                <div>
                    <label>Login Email Address *</label>
                    <input type="email" name="admin_email" value="<?php echo e($admin->email); ?>" required>
                </div>

                <hr style="border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0;">

                <h4 style="margin-bottom: 0.5rem; color: #fff;">Change Admin Password</h4>
                <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1rem;">Leave blank if you do not wish to change your password.</p>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div>
                        <label>New Password (min 6 characters)</label>
                        <input type="password" name="admin_password" placeholder="••••••••">
                    </div>
                    <div>
                        <label>Confirm New Password</label>
                        <input type="password" name="admin_password_confirmation" placeholder="••••••••">
                    </div>
                </div>

                <button type="submit" class="btn btn-primary" style="margin-top: 1.5rem; background: linear-gradient(135deg, var(--accent), #BE185D);">
                    <i class="fa-solid fa-key"></i> Update Credentials
                </button>
            </form>
        </div>

        <!-- Push Broadcast Tool -->
        <div class="card" style="max-width: 800px; margin-top: 1.5rem;">
            <form action="<?php echo e(route('admin.settings.notify')); ?>" method="POST" enctype="multipart/form-data">
                <?php echo csrf_field(); ?>
                <h3 style="margin-bottom: 0.5rem;"><i class="fa-solid fa-paper-plane" style="color: var(--primary);"></i> Targeted Push Notification Broadcast</h3>
                <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.2rem;">Send push notification announcements to customers, optical store vendors, or the entire platform.</p>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div>
                        <label>Target Audience *</label>
                        <select name="target_audience" required style="margin-bottom: 1rem;">
                            <option value="both">Both (All Customers & All Vendors) 🌐</option>
                            <option value="all_users">All Customers / Mobile Users Only 👥</option>
                            <option value="all_vendors">All Optical Vendors / Stores Only 🏪</option>
                        </select>
                    </div>
                    <div>
                        <label>Notification Image (Optional)</label>
                        <input type="file" name="image" accept="image/*" style="padding: 0.4rem;">
                    </div>
                </div>

                <div>
                    <label>Notification Title *</label>
                    <input type="text" name="title" value="Special Optical Offers & Mega Sale! 👓" required>
                </div>

                <div>
                    <label>Notification Message *</label>
                    <textarea name="message" rows="2" required>Try on the newest aviator and cat-eye frames in 3D AR or visit nearby optical stores!</textarea>
                </div>

                <button type="submit" class="btn btn-secondary" style="margin-top: 1rem; border-color: var(--primary); color: #fff; background: var(--primary);">
                    <i class="fa-solid fa-bullhorn"></i> Send Targeted Push Broadcast
                </button>
            </form>

            <?php if(isset($notifications) && $notifications->isNotEmpty()): ?>
                <hr style="border: 0; border-top: 1px solid var(--border); margin: 2rem 0 1rem;">
                <h4 style="color: #fff; margin-bottom: 1rem;"><i class="fa-solid fa-clock-rotate-left"></i> Broadcast History</h4>
                <div style="overflow-x: auto;">
                    <table>
                        <thead>
                            <tr>
                                <th>Date & Time</th>
                                <th>Target</th>
                                <th>Title</th>
                                <th>Message</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $__currentLoopData = $notifications; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $notif): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <tr>
                                    <td style="color: var(--text-muted); font-size: 0.8rem;"><?php echo e($notif->created_at->format('d M, h:i A')); ?></td>
                                    <td>
                                        <span class="badge" style="background: rgba(99, 102, 241, 0.2); color: #818CF8;">
                                            <?php echo e($notif->target_audience === 'both' ? 'Both (Users & Vendors)' : ($notif->target_audience === 'all_users' ? 'All Customers' : 'All Vendors')); ?>

                                        </span>
                                    </td>
                                    <td style="font-weight: 600; color: #fff;"><?php echo e($notif->title); ?></td>
                                    <td style="color: var(--text-muted); font-size: 0.85rem;"><?php echo e(Str::limit($notif->message, 50)); ?></td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </tbody>
                    </table>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <script>
        function switchTab(tabId, btn) {
            document.querySelectorAll('.tab-pane').forEach(el => el.classList.remove('active'));
            document.querySelectorAll('.settings-tab-btn').forEach(el => el.classList.remove('active'));

            document.getElementById('tab-' + tabId).classList.add('active');
            btn.classList.add('active');
        }
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\Clients\MInfosoftware\LiveApp\MyOpticals\backend\resources\views/admin/settings.blade.php ENDPATH**/ ?>