@extends('eliteadmin::layouts.app')

@section('title', 'Settings')
@section('page_class', 'page-settings')

@section('content')
    <div class="page-header">
        <div>
            <h1 class="page-title">Settings</h1>
            <nav class="breadcrumb">
                <a href="{{ route('dashboard') }}" class="breadcrumb-item">Home</a>
                <span class="breadcrumb-item active">Settings</span>
            </nav>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body p-2">
                    <ul class="nav nav-tabs nav-tabs-bordered flex-column flex-sm-row" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab">General</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="company-tab" data-bs-toggle="tab" data-bs-target="#company" type="button" role="tab">Company</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="email-tab" data-bs-toggle="tab" data-bs-target="#email" type="button" role="tab">Email</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="whatsapp-tab" data-bs-toggle="tab" data-bs-target="#whatsapp" type="button" role="tab">WhatsApp</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="notifications-tab" data-bs-toggle="tab" data-bs-target="#notifications" type="button" role="tab">Notifications</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="security-tab" data-bs-toggle="tab" data-bs-target="#security" type="button" role="tab">Security</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="appearance-tab" data-bs-toggle="tab" data-bs-target="#appearance" type="button" role="tab">Appearance</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="homepage-tab" data-bs-toggle="tab" data-bs-target="#homepage" type="button" role="tab">Homepage</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-12">
            <form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="tab-content">
                    <div class="tab-pane fade show active" id="general" role="tabpanel">
                        <div class="card">
                            <div class="card-header"><h5 class="card-title mb-0">General Settings</h5></div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="app_name" class="form-label">Platform Name</label>
                                        <input type="text" name="app_name" id="app_name" class="form-control @error('app_name') is-invalid @enderror"
                                               value="{{ old('app_name', $settings['app_name'] ?? config('app.name')) }}">
                                        @error('app_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        <div class="form-text">Displayed on login page, sidebar, and header.</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="timezone" class="form-label">Timezone</label>
                                        <select name="timezone" id="timezone" class="form-select @error('timezone') is-invalid @enderror">
                                            <option value="UTC" @selected(old('timezone', $settings['timezone'] ?? 'UTC') === 'UTC')>UTC</option>
                                            <option value="America/New_York" @selected(old('timezone', $settings['timezone'] ?? '') === 'America/New_York')>America/New_York</option>
                                            <option value="Europe/London" @selected(old('timezone', $settings['timezone'] ?? '') === 'Europe/London')>Europe/London</option>
                                        </select>
                                        @error('timezone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="currency" class="form-label">Currency</label>
                                        <input type="text" id="currency" class="form-control" value="INR (Indian Rupee)" readonly>
                                        <input type="hidden" name="currency" value="INR">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="locale" class="form-label">Language</label>
                                        <select name="locale" id="locale" class="form-select @error('locale') is-invalid @enderror">
                                            <option value="en" @selected(old('locale', $settings['locale'] ?? 'en') === 'en')>English</option>
                                            <option value="fr" @selected(old('locale', $settings['locale'] ?? '') === 'fr')>French</option>
                                            <option value="de" @selected(old('locale', $settings['locale'] ?? '') === 'de')>German</option>
                                        </select>
                                        @error('locale')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="company" role="tabpanel">
                        <div class="card">
                            <div class="card-header"><h5 class="card-title mb-0">Company Information</h5></div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="company_name" class="form-label">Company Name</label>
                                        <input type="text" name="company_name" id="company_name" class="form-control @error('company_name') is-invalid @enderror"
                                               value="{{ old('company_name', $settings['company_name'] ?? '') }}">
                                        @error('company_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="company_email" class="form-label">Company Email</label>
                                        <input type="email" name="company_email" id="company_email" class="form-control @error('company_email') is-invalid @enderror"
                                               value="{{ old('company_email', $settings['company_email'] ?? '') }}">
                                        @error('company_email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="company_phone" class="form-label">Phone</label>
                                        <input type="tel" name="company_phone" id="company_phone" class="form-control @error('company_phone') is-invalid @enderror"
                                               value="{{ old('company_phone', $settings['company_phone'] ?? '') }}">
                                        @error('company_phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-12">
                                        <label for="company_address" class="form-label">Address</label>
                                        <textarea name="company_address" id="company_address" rows="3" class="form-control @error('company_address') is-invalid @enderror">{{ old('company_address', $settings['company_address'] ?? '') }}</textarea>
                                        @error('company_address')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="email" role="tabpanel">
                        <div class="card">
                            <div class="card-header"><h5 class="card-title mb-0">Email / SMTP</h5></div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="mail_host" class="form-label">SMTP Host</label>
                                        <input type="text" name="mail_host" id="mail_host" class="form-control @error('mail_host') is-invalid @enderror"
                                               value="{{ old('mail_host', $settings['mail_host'] ?? '') }}">
                                        @error('mail_host')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="mail_port" class="form-label">SMTP Port</label>
                                        <input type="number" name="mail_port" id="mail_port" class="form-control @error('mail_port') is-invalid @enderror"
                                               value="{{ old('mail_port', $settings['mail_port'] ?? '587') }}">
                                        @error('mail_port')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="mail_username" class="form-label">SMTP Username</label>
                                        <input type="text" name="mail_username" id="mail_username" class="form-control @error('mail_username') is-invalid @enderror"
                                               value="{{ old('mail_username', $settings['mail_username'] ?? '') }}">
                                        @error('mail_username')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="mail_password" class="form-label">SMTP Password</label>
                                        <input type="password" name="mail_password" id="mail_password" class="form-control @error('mail_password') is-invalid @enderror">
                                        @error('mail_password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="mail_from_address" class="form-label">From Email</label>
                                        <input type="email" name="mail_from_address" id="mail_from_address" class="form-control @error('mail_from_address') is-invalid @enderror"
                                               value="{{ old('mail_from_address', $settings['mail_from_address'] ?? '') }}">
                                        @error('mail_from_address')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="mail_from_name" class="form-label">From Name</label>
                                        <input type="text" name="mail_from_name" id="mail_from_name" class="form-control @error('mail_from_name') is-invalid @enderror"
                                               value="{{ old('mail_from_name', $settings['mail_from_name'] ?? '') }}">
                                        @error('mail_from_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="whatsapp" role="tabpanel">
                        <div class="card">
                            <div class="card-header"><h5 class="card-title mb-0">WhatsApp Notifications</h5></div>
                            <div class="card-body">
                                <p class="text-muted">When enabled, the same message sent by email is also delivered via your WhatsApp API. Staff must have a phone number on their profile.</p>

                                <div class="row g-3">
                                    <div class="col-12">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" name="whatsapp_enabled" id="whatsapp_enabled" value="1"
                                                   @checked(old('whatsapp_enabled', $settings['whatsapp_enabled'] ?? false))>
                                            <label class="form-check-label" for="whatsapp_enabled">Enable WhatsApp messages</label>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label for="whatsapp_api_url" class="form-label">WhatsApp API URL</label>
                                        <textarea name="whatsapp_api_url" id="whatsapp_api_url" rows="3"
                                                  class="form-control @error('whatsapp_api_url') is-invalid @enderror"
                                                  placeholder="https://bot.cpskaro.in/api/send-text?api_key=YOUR_KEY&number=91{MOB}&msg={MSG}">{{ old('whatsapp_api_url', $settings['whatsapp_api_url'] ?? '') }}</textarea>
                                        @error('whatsapp_api_url')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        <div class="form-text">
                                            Use <code>{MOB}</code> for the recipient mobile number and <code>{MSG}</code> for the message text.
                                            Examples:
                                            <br><code>https://sms.cpskaro.in/send-message?api_key=KEY&sender=919954770099&number=91{MOB}&message={MSG}</code>
                                            <br><code>https://bot.cpskaro.in/api/send-text?api_key=KEY&number=91{MOB}&msg={MSG}</code>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    @include('settings.partials.notifications')

                    <div class="tab-pane fade" id="security" role="tabpanel">
                        <div class="card">
                            <div class="card-header"><h5 class="card-title mb-0">Security</h5></div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="password_min_length" class="form-label">Minimum Password Length</label>
                                        <input type="number" name="password_min_length" id="password_min_length" class="form-control @error('password_min_length') is-invalid @enderror"
                                               value="{{ old('password_min_length', $settings['password_min_length'] ?? 8) }}" min="6">
                                        @error('password_min_length')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="session_timeout" class="form-label">Session Timeout (minutes)</label>
                                        <input type="number" name="session_timeout" id="session_timeout" class="form-control @error('session_timeout') is-invalid @enderror"
                                               value="{{ old('session_timeout', $settings['session_timeout'] ?? 120) }}" min="5">
                                        @error('session_timeout')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-12">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" name="two_factor_enabled" id="two_factor_enabled" value="1"
                                                   @checked(old('two_factor_enabled', $settings['two_factor_enabled'] ?? false))>
                                            <label class="form-check-label" for="two_factor_enabled">Enable two-factor authentication (WhatsApp OTP)</label>
                                        </div>
                                        <div class="form-text">When enabled, staff, customers, and admins who turn on 2FA in their profile must enter a WhatsApp code at login. Requires WhatsApp API configuration.</div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" name="allow_registration" id="allow_registration" value="1"
                                                   @checked(old('allow_registration', $settings['allow_registration'] ?? false))>
                                            <label class="form-check-label" for="allow_registration">Allow customer registration</label>
                                        </div>
                                        <div class="form-text">When off, only staff accounts can be created from Staff &amp; Permissions. When on, visitors can register as customers at <code>/register</code>.</div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="require_strong_password" id="require_strong_password" value="1"
                                                   @checked(old('require_strong_password', $settings['require_strong_password'] ?? false))>
                                            <label class="form-check-label" for="require_strong_password">Require strong passwords</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="appearance" role="tabpanel">
                        <div class="card">
                            <div class="card-header"><h5 class="card-title mb-0">Appearance</h5></div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="theme" class="form-label">Theme</label>
                                        <select name="theme" id="theme" class="form-select @error('theme') is-invalid @enderror">
                                            <option value="light" @selected(old('theme', $settings['theme'] ?? 'light') === 'light')>Light</option>
                                            <option value="dark" @selected(old('theme', $settings['theme'] ?? '') === 'dark')>Dark</option>
                                            <option value="auto" @selected(old('theme', $settings['theme'] ?? '') === 'auto')>Auto</option>
                                        </select>
                                        @error('theme')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="logo" class="form-label">Logo</label>
                                        <input type="file" name="logo" id="logo" class="form-control @error('logo') is-invalid @enderror" accept="image/*">
                                        @error('logo')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="primary_color" class="form-label">Primary Color</label>
                                        <input type="color" name="primary_color" id="primary_color" class="form-control form-control-color @error('primary_color') is-invalid @enderror"
                                               value="{{ old('primary_color', $settings['primary_color'] ?? '#4154f1') }}">
                                        @error('primary_color')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    @include('settings.partials.homepage')
                </div>

                <div class="d-flex justify-content-end mt-4" id="settings-global-save">
                    <input type="hidden" name="settings_active_tab" id="settings_active_tab" value="{{ old('settings_active_tab', session('settings_active_tab', 'general')) }}">
                    <button type="submit" class="btn btn-primary">Save Settings</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const globalSave = document.getElementById('settings-global-save');
        const homepageTab = document.getElementById('homepage-tab');

        if (globalSave && homepageTab) {
            function toggleGlobalSave() {
                globalSave.classList.toggle('d-none', homepageTab.classList.contains('active'));
            }

            homepageTab.addEventListener('shown.bs.tab', toggleGlobalSave);
            document.querySelectorAll('[data-bs-toggle="tab"]').forEach(function (tab) {
                tab.addEventListener('shown.bs.tab', function (event) {
                    toggleGlobalSave();
                    const hidden = document.getElementById('settings_active_tab');
                    if (hidden && event.target?.id) {
                        hidden.value = event.target.id.replace('-tab', '');
                    }
                });
            });

            toggleGlobalSave();
        }

        @if (session('settings_active_tab') && $errors->isEmpty())
            const activeTabButton = document.getElementById(@json(session('settings_active_tab')).replace(/_/g, '-') + '-tab');
            if (activeTabButton && typeof bootstrap !== 'undefined') {
                bootstrap.Tab.getOrCreateInstance(activeTabButton).show();
            }
        @endif
    });
</script>
@endpush