@extends('layouts.admin')

@section('title', 'Settings')
@section('page-title', 'Admin Settings')

@section('content')
<div class="row g-4">
    <div class="col-xl-8">
        <div class="card">
            <div class="card-header">
                <h6 class="card-title mb-0">General Settings</h6>
            </div>
            <div class="card-body">
                <form>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="siteName" class="form-label">Site Name</label>
                                <input type="text" class="form-control" id="siteName" value="Phoenix Admin">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="siteEmail" class="form-label">Site Email</label>
                                <input type="email" class="form-control" id="siteEmail" value="admin@phoenix.com">
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="siteDescription" class="form-label">Site Description</label>
                        <textarea class="form-control" id="siteDescription" rows="3">Phoenix Admin Dashboard - Manage your application with ease</textarea>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="timezone" class="form-label">Timezone</label>
                                <select class="form-control" id="timezone">
                                    <option>UTC</option>
                                    <option>America/New_York</option>
                                    <option>Europe/London</option>
                                    <option>Asia/Tokyo</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="dateFormat" class="form-label">Date Format</label>
                                <select class="form-control" id="dateFormat">
                                    <option>Y-m-d</option>
                                    <option>m/d/Y</option>
                                    <option>d/m/Y</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-outline-secondary me-2">Reset</button>
                        <button type="submit" class="btn btn-phoenix">Save Settings</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card">
            <div class="card-header">
                <h6 class="card-title mb-0">Security Settings</h6>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="twoFactor" checked>
                        <label class="form-check-label" for="twoFactor">
                            Two-Factor Authentication
                        </label>
                    </div>
                </div>
                
                <div class="mb-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="loginNotifications" checked>
                        <label class="form-check-label" for="loginNotifications">
                            Login Notifications
                        </label>
                    </div>
                </div>
                
                <div class="mb-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="sessionTimeout">
                        <label class="form-check-label" for="sessionTimeout">
                            Auto Session Timeout
                        </label>
                    </div>
                </div>

                <hr>

                <div class="mb-3">
                    <label for="maxLoginAttempts" class="form-label">Max Login Attempts</label>
                    <input type="number" class="form-control" id="maxLoginAttempts" value="5">
                </div>

                <div class="mb-3">
                    <label for="sessionDuration" class="form-label">Session Duration (minutes)</label>
                    <input type="number" class="form-control" id="sessionDuration" value="120">
                </div>
            </div>
        </div>
    </div>
</div>
@endsection