@extends('layouts.app')
@section('title','Settings — HIGHRA CRM')
@section('header','System Settings')

@section('content')
<div class="row" style="margin-bottom: 20px;">
    <div>
        <h1 style="margin: 0;">System Settings</h1>
        <p style="color: #8e9ab4; margin: 4px 0 0;">Manage your company profile, currency, regional settings, and system configuration.</p>
    </div>
</div>

<!-- TABS NAVIGATION -->
<div class="tabs">
    <button class="tab-btn active" onclick="switchSettingTab('company-tab', this)">Company Profile</button>
    <button class="tab-btn" onclick="switchSettingTab('regional-tab', this)">Regional & Currency</button>
    <button class="tab-btn" onclick="switchSettingTab('system-tab', this)">System Health & Environment</button>
</div>

<form method="POST" action="{{ route('settings.update') }}">
    @csrf

    <!-- TAB 1: COMPANY PROFILE -->
    <div id="company-tab" class="setting-tab-content">
        <div class="panel" style="margin-top: 0; max-width: 900px;">
            <h2 style="margin-top: 0; padding-bottom: 12px; border-bottom: 1px solid #202b47; color: #fff;">
                Company Information
            </h2>
            
            <div class="grid2">
                <div>
                    <label>Company Name *</label>
                    <input type="text" name="company_name" value="{{ old('company_name', $settings->company_name) }}" required placeholder="e.g. HIGHRA Technologies">
                </div>

                <div>
                    <label>Primary Business Email</label>
                    <input type="email" name="company_email" value="{{ old('company_email', $settings->company_email) }}" placeholder="e.g. contact@highratech.com">
                </div>

                <div>
                    <label>Contact Phone Number</label>
                    <input type="text" name="company_phone" value="{{ old('company_phone', $settings->company_phone) }}" placeholder="e.g. +91 98765 43210">
                </div>
            </div>

            <div style="margin-top: 16px;">
                <label>Company Office Address</label>
                <textarea name="company_address" rows="3" placeholder="Enter full address details...">{{ old('company_address', $settings->company_address) }}</textarea>
            </div>

            <div style="margin-top: 24px; padding-top: 16px; border-top: 1px solid #202b47;">
                <button type="submit" class="btn">Save Company Settings</button>
            </div>
        </div>
    </div>

    <!-- TAB 2: REGIONAL & CURRENCY -->
    <div id="regional-tab" class="setting-tab-content" style="display: none;">
        <div class="panel" style="margin-top: 0; max-width: 900px;">
            <h2 style="margin-top: 0; padding-bottom: 12px; border-bottom: 1px solid #202b47; color: #fff;">
                Regional & Financial Preferences
            </h2>

            <div class="grid2">
                <div>
                    <label>System Currency *</label>
                    <select name="currency" required>
                        <option value="INR" {{ old('currency', $settings->currency) == 'INR' ? 'selected' : '' }}>INR — Indian Rupee (₹)</option>
                        <option value="USD" {{ old('currency', $settings->currency) == 'USD' ? 'selected' : '' }}>USD — US Dollar ($)</option>
                        <option value="EUR" {{ old('currency', $settings->currency) == 'EUR' ? 'selected' : '' }}>EUR — Euro (€)</option>
                        <option value="GBP" {{ old('currency', $settings->currency) == 'GBP' ? 'selected' : '' }}>GBP — British Pound (£)</option>
                        <option value="AED" {{ old('currency', $settings->currency) == 'AED' ? 'selected' : '' }}>AED — UAE Dirham (AED)</option>
                        <option value="SAR" {{ old('currency', $settings->currency) == 'SAR' ? 'selected' : '' }}>SAR — Saudi Riyal (SAR)</option>
                    </select>
                </div>

                <div>
                    <label>Default Timezone *</label>
                    <select name="timezone" required>
                        <option value="Asia/Kolkata" {{ old('timezone', $settings->timezone) == 'Asia/Kolkata' ? 'selected' : '' }}>Asia/Kolkata (IST +5:30)</option>
                        <option value="UTC" {{ old('timezone', $settings->timezone) == 'UTC' ? 'selected' : '' }}>UTC (Coordinated Universal Time)</option>
                        <option value="America/New_York" {{ old('timezone', $settings->timezone) == 'America/New_York' ? 'selected' : '' }}>America/New_York (EST -5:00)</option>
                        <option value="Europe/London" {{ old('timezone', $settings->timezone) == 'Europe/London' ? 'selected' : '' }}>Europe/London (GMT/BST)</option>
                        <option value="Asia/Dubai" {{ old('timezone', $settings->timezone) == 'Asia/Dubai' ? 'selected' : '' }}>Asia/Dubai (GST +4:00)</option>
                    </select>
                </div>
            </div>

            <div style="margin-top: 24px; padding-top: 16px; border-top: 1px solid #202b47;">
                <button type="submit" class="btn">Save Regional Settings</button>
            </div>
        </div>
    </div>
</form>

<!-- TAB 3: SYSTEM HEALTH & ENVIRONMENT -->
<div id="system-tab" class="setting-tab-content" style="display: none;">
    <div class="panel" style="margin-top: 0; max-width: 900px;">
        <h2 style="margin-top: 0; padding-bottom: 12px; border-bottom: 1px solid #202b47; color: #fff;">
            System Status & Runtime Overview
        </h2>

        <div class="cards" style="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 20px;">
            <div style="background: #080f20; border: 1px solid #1e2d4d; border-radius: 12px; padding: 18px;">
                <span style="font-size: 12px; color: #8e9ab4; text-transform: uppercase;">PHP Version</span>
                <strong style="font-size: 20px; margin-top: 6px; color: #a5b4fc;">{{ $systemInfo['php_version'] }}</strong>
            </div>

            <div style="background: #080f20; border: 1px solid #1e2d4d; border-radius: 12px; padding: 18px;">
                <span style="font-size: 12px; color: #8e9ab4; text-transform: uppercase;">Laravel Framework</span>
                <strong style="font-size: 20px; margin-top: 6px; color: #6ee7b7;">{{ $systemInfo['laravel_version'] }}</strong>
            </div>

            <div style="background: #080f20; border: 1px solid #1e2d4d; border-radius: 12px; padding: 18px;">
                <span style="font-size: 12px; color: #8e9ab4; text-transform: uppercase;">Environment</span>
                <strong style="font-size: 20px; margin-top: 6px; color: #fde68a;">{{ strtoupper($systemInfo['app_env']) }}</strong>
            </div>

            <div style="background: #080f20; border: 1px solid #1e2d4d; border-radius: 12px; padding: 18px;">
                <span style="font-size: 12px; color: #8e9ab4; text-transform: uppercase;">Database Connection</span>
                <strong style="font-size: 20px; margin-top: 6px; color: #6d59ff;">MySQL (htscrm)</strong>
            </div>
        </div>

        <table>
            <thead>
                <tr>
                    <th>Subsystem</th>
                    <th>Configuration</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Cache Storage</td>
                    <td><code>{{ $systemInfo['cache_driver'] }}</code></td>
                    <td><span class="badge badge-active">Operational</span></td>
                </tr>
                <tr>
                    <td>Session Storage</td>
                    <td><code>{{ $systemInfo['session_driver'] }}</code></td>
                    <td><span class="badge badge-active">Operational</span></td>
                </tr>
                <tr>
                    <td>Meta Webhooks</td>
                    <td><code>v25.0 API</code></td>
                    <td><span class="badge badge-manager">Ready for Integration</span></td>
                </tr>
                <tr>
                    <td>WhatsApp API</td>
                    <td><code>Cloud API</code></td>
                    <td><span class="badge badge-admin">Configured</span></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
    function switchSettingTab(tabId, btn) {
        document.querySelectorAll('.setting-tab-content').forEach(el => el.style.display = 'none');
        document.querySelectorAll('.tabs .tab-btn').forEach(el => el.classList.remove('active'));

        document.getElementById(tabId).style.display = 'block';
        btn.classList.add('active');
    }
</script>
@endsection