<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1"><i class="fa-solid fa-gear text-primary me-2"></i>System &amp; Application Settings</h4>
            <p class="text-muted mb-0">Firestore database project configs, notification webhooks, and regional parameters.</p>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-body p-4 p-md-5">
                    <form onsubmit="event.preventDefault(); alert('Settings saved successfully!');">
                        <h5 class="fw-bold mb-3 border-bottom pb-2">Firebase / Firestore Infrastructure</h5>
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Firebase Project ID</label>
                                <input type="text" class="form-control rounded-3 font-monospace" value="staff-checkin-b4972" readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Storage Bucket URL</label>
                                <input type="text" class="form-control rounded-3 font-monospace small" value="staff-checkin-b4972.firebasestorage.app" readonly>
                            </div>
                        </div>

                        <h5 class="fw-bold mb-3 border-bottom pb-2">Active Firestore Collections Schema</h5>
                        <ul class="list-group list-group-flush mb-4 small">
                            <li class="list-group-item px-0 py-2 d-flex justify-content-between">
                                <span class="font-monospace fw-bold text-primary">CheckIn_Logs</span>
                                <span class="text-muted">scheduleId, staffId, status, storeId, submittedAt, tasks[]</span>
                            </li>
                            <li class="list-group-item px-0 py-2 d-flex justify-content-between">
                                <span class="font-monospace fw-bold text-primary">Scheduled_CheckIn</span>
                                <span class="text-muted">title, createdAt, scheduledAt, status, storeStatus{}, tasks[]</span>
                            </li>
                            <li class="list-group-item px-0 py-2 d-flex justify-content-between">
                                <span class="font-monospace fw-bold text-primary">Staff</span>
                                <span class="text-muted">staffId, fullName, designation, phone, pinCode, shift, storeId, imageUrl, isActive</span>
                            </li>
                            <li class="list-group-item px-0 py-2 d-flex justify-content-between">
                                <span class="font-monospace fw-bold text-primary">Stores</span>
                                <span class="text-muted">name, address, city, country, lat, lng, isActive, createdAt</span>
                            </li>
                            <li class="list-group-item px-0 py-2 d-flex justify-content-between">
                                <span class="font-monospace fw-bold text-primary">users</span>
                                <span class="text-muted">email, name, password, userRole</span>
                            </li>
                        </ul>

                        <h5 class="fw-bold mb-3 border-bottom pb-2">Regional &amp; Localization Settings</h5>
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Default Timezone</label>
                                <select class="form-select rounded-3">
                                    <option value="Asia/Karachi" selected>Asia/Karachi (UTC+5:00)</option>
                                    <option value="UTC">UTC</option>
                                    <option value="Asia/Dubai">Asia/Dubai (UTC+4:00)</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Default Country</label>
                                <input type="text" class="form-control rounded-3" value="Pakistan">
                            </div>
                        </div>

                        <div class="mt-4 pt-3 border-top text-end">
                            <button type="submit" class="btn btn-primary px-5 fw-semibold">Save Settings</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
