@extends('layouts.state')

@section('title', 'Settings')

@section('content')
<div class="row g-3 mb-3">
    <div class="col-md-8">
        <h2 class="mb-2 text-body-emphasis">State Settings</h2>
        <p class="text-body-tertiary lh-sm">Configure state-level system settings and preferences</p>
    </div>
</div>

<div class="row g-3">
    <div class="col-lg-3">
        <!-- Settings Navigation -->
        <div class="card">
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    <a href="#general" class="list-group-item list-group-item-action active" data-bs-toggle="pill">
                        <span class="fas fa-cog me-2"></span>General Settings
                    </a>
                    <a href="#notifications" class="list-group-item list-group-item-action" data-bs-toggle="pill">
                        <span class="fas fa-bell me-2"></span>Notifications
                    </a>
                    <a href="#security" class="list-group-item list-group-item-action" data-bs-toggle="pill">
                        <span class="fas fa-shield-alt me-2"></span>Security
                    </a>
                    <a href="#payment" class="list-group-item list-group-item-action" data-bs-toggle="pill">
                        <span class="fas fa-credit-card me-2"></span>Payment Settings
                    </a>
                    <a href="#email" class="list-group-item list-group-item-action" data-bs-toggle="pill">
                        <span class="fas fa-envelope me-2"></span>Email Settings
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-9">
        <div class="tab-content">
            <!-- General Settings -->
            <div class="tab-pane fade show active" id="general">
                <div class="card">
                    <div class="card-header border-bottom bg-body">
                        <h6 class="mb-0">General Settings</h6>
                    </div>
                    <div class="card-body">
                        <form>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="state_name" class="form-label">State Name</label>
                                    <input type="text" class="form-control" id="state_name" value="Sample State">
                                </div>
                                <div class="col-md-6">
                                    <label for="state_code" class="form-label">State Code</label>
                                    <input type="text" class="form-control" id="state_code" value="SS">
                                </div>
                                <div class="col-md-6">
                                    <label for="timezone" class="form-label">Timezone</label>
                                    <select class="form-select" id="timezone">
                                        <option>UTC-5 (Eastern Time)</option>
                                        <option>UTC-6 (Central Time)</option>
                                        <option>UTC-7 (Mountain Time)</option>
                                        <option>UTC-8 (Pacific Time)</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="currency" class="form-label">Currency</label>
                                    <select class="form-select" id="currency">
                                        <option>USD ($)</option>
                                        <option>EUR (€)</option>
                                        <option>GBP (£)</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label for="description" class="form-label">State Description</label>
                                    <textarea class="form-control" id="description" rows="3">This is the official state taekwondo association managing all martial arts activities in the region.</textarea>
                                </div>
                            </div>
                            <div class="mt-3">
                                <button type="submit" class="btn btn-primary">
                                    <span class="fas fa-save me-2"></span>Save Changes
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- Notifications Settings -->
            <div class="tab-pane fade" id="notifications">
                <div class="card">
                    <div class="card-header border-bottom bg-body">
                        <h6 class="mb-0">Notification Settings</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="email_notifications" checked>
                                    <label class="form-check-label" for="email_notifications">
                                        Email Notifications
                                    </label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="sms_notifications">
                                    <label class="form-check-label" for="sms_notifications">
                                        SMS Notifications
                                    </label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="push_notifications" checked>
                                    <label class="form-check-label" for="push_notifications">
                                        Push Notifications
                                    </label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="new_user_notifications" checked>
                                    <label class="form-check-label" for="new_user_notifications">
                                        New User Registration Notifications
                                    </label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="payment_notifications" checked>
                                    <label class="form-check-label" for="payment_notifications">
                                        Payment Notifications
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button type="submit" class="btn btn-primary">
                                <span class="fas fa-save me-2"></span>Save Preferences
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Security Settings -->
            <div class="tab-pane fade" id="security">
                <div class="card">
                    <div class="card-header border-bottom bg-body">
                        <h6 class="mb-0">Security Settings</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="two_factor" checked>
                                    <label class="form-check-label" for="two_factor">
                                        Two-Factor Authentication
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="session_timeout" class="form-label">Session Timeout (minutes)</label>
                                <input type="number" class="form-control" id="session_timeout" value="30">
                            </div>
                            <div class="col-md-6">
                                <label for="password_policy" class="form-label">Password Policy</label>
                                <select class="form-select" id="password_policy">
                                    <option>Standard (8+ characters)</option>
                                    <option>Strong (12+ characters, mixed case)</option>
                                    <option>Very Strong (16+ characters, symbols)</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="login_logging" checked>
                                    <label class="form-check-label" for="login_logging">
                                        Log Login Attempts
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button type="submit" class="btn btn-primary">
                                <span class="fas fa-save me-2"></span>Update Security
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Payment Settings -->
            <div class="tab-pane fade" id="payment">
                <div class="card">
                    <div class="card-header border-bottom bg-body">
                        <h6 class="mb-0">Payment Gateway Settings</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="stripe_enabled" checked>
                                    <label class="form-check-label" for="stripe_enabled">
                                        Enable Stripe Payments
                                    </label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="paypal_enabled">
                                    <label class="form-check-label" for="paypal_enabled">
                                        Enable PayPal Payments
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="processing_fee" class="form-label">Processing Fee (%)</label>
                                <input type="number" class="form-control" id="processing_fee" value="2.9" step="0.1">
                            </div>
                            <div class="col-md-6">
                                <label for="minimum_amount" class="form-label">Minimum Payment Amount</label>
                                <input type="number" class="form-control" id="minimum_amount" value="10.00" step="0.01">
                            </div>
                        </div>
                        <div class="mt-3">
                            <button type="submit" class="btn btn-primary">
                                <span class="fas fa-save me-2"></span>Save Payment Settings
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Email Settings -->
            <div class="tab-pane fade" id="email">
                <div class="card">
                    <div class="card-header border-bottom bg-body">
                        <h6 class="mb-0">Email Configuration</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="smtp_host" class="form-label">SMTP Host</label>
                                <input type="text" class="form-control" id="smtp_host" value="smtp.gmail.com">
                            </div>
                            <div class="col-md-6">
                                <label for="smtp_port" class="form-label">SMTP Port</label>
                                <input type="number" class="form-control" id="smtp_port" value="587">
                            </div>
                            <div class="col-md-6">
                                <label for="from_email" class="form-label">From Email</label>
                                <input type="email" class="form-control" id="from_email" value="noreply@state.taekwondo.com">
                            </div>
                            <div class="col-md-6">
                                <label for="from_name" class="form-label">From Name</label>
                                <input type="text" class="form-control" id="from_name" value="State Taekwondo Association">
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="smtp_encryption" checked>
                                    <label class="form-check-label" for="smtp_encryption">
                                        Enable SMTP Encryption
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button type="submit" class="btn btn-primary">
                                <span class="fas fa-save me-2"></span>Update Email Settings
                            </button>
                            <button type="button" class="btn btn-phoenix-secondary ms-2">
                                <span class="fas fa-paper-plane me-2"></span>Test Email
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Initialize Bootstrap tabs
var triggerTabList = [].slice.call(document.querySelectorAll('[data-bs-toggle="pill"]'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)
  
  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})
</script>
@endpush

@endsection