@extends('layouts.admin')

@section('title', 'Settings')

@section('content')
    <header class="page-header">
        <div>
            <p class="eyebrow">Configuration</p>
            <h1>Settings</h1>
            <p class="muted">Manage system configuration and preferences</p>
        </div>
    </header>

    <section class="tabs" id="settingsTabs">
        <button class="tab active" data-tab="company">Company</button>
        <button class="tab" data-tab="users-roles">Users &amp; Roles</button>
        <button class="tab" data-tab="notifications">Notifications</button>
        <button class="tab" data-tab="client-settings">Client Settings</button>
    </section>

    <!-- Company Tab -->
    <div id="tab-company" class="tab-content active">
        <section class="split-panel">
            <article class="panel">
                <div class="panel__header">
                    <h2>Company Information</h2>
                </div>
                <div class="panel__body form-grid">
                    <label class="field">
                        <span>Company Name</span>
                        <input type="text" class="input" placeholder="Company Name" value="{{ $profile['name'] }}">
                    </label>
                    <label class="field">
                        <span>Industry</span>
                        <input type="text" class="input" placeholder="Industry" value="{{ $profile['industry'] }}">
                    </label>
                    <label class="field">
                        <span>Contact Email</span>
                        <input type="email" class="input" placeholder="Contact Email" value="{{ $profile['email'] }}">
                    </label>
                    <label class="field">
                        <span>Phone Number</span>
                        <input type="text" class="input" placeholder="+44 20 1234 5678" value="{{ $profile['phone'] }}">
                    </label>
                    <label class="field full">
                        <span>Address</span>
                        <input type="text" class="input" placeholder="Address" value="{{ $profile['address'] }}">
                    </label>
                    <div class="form-actions">
                        <button class="ghost-btn">Cancel</button>
                        <button class="primary-btn">Save Changes</button>
                    </div>
                </div>
            </article>
            <article class="panel">
                <div class="panel__header">
                    <h2>Branding</h2>
                </div>
                <div class="panel__body branding">
                    <div class="logo-upload">
                        <div class="logo-mark large">HR</div>
                        <div>
                            <p class="muted">Company Logo</p>
                            <button class="ghost-btn small">Upload Logo</button>
                        </div>
                    </div>
                    <div class="form-actions">
                        <button class="ghost-btn">Cancel</button>
                        <button class="primary-btn">Save Changes</button>
                    </div>
                </div>
            </article>
        </section>
    </div>

    <!-- Users & Roles Tab -->
    <div id="tab-users-roles" class="tab-content">
        <section class="panel">
            <div class="panel__header" style="display: flex; justify-content: space-between; align-items: center;">
                <h2>Admin Users</h2>
                <button class="primary-btn">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" style="margin-right: 6px; vertical-align: middle;">
                        <line x1="12" y1="5" x2="12" y2="19"/>
                        <line x1="5" y1="12" x2="19" y2="12"/>
                    </svg>
                    Add Admin
                </button>
            </div>
            <div class="panel__body">
                <div class="admin-user-card">
                    <div class="admin-user-info">
                        <span class="avatar">HR</span>
                        <div>
                            <p style="font-weight: 600; margin: 0;">Admin User</p>
                            <span class="muted">hr@company.com</span>
                        </div>
                    </div>
                    <div style="display: flex; gap: 12px; align-items: center;">
                        <span class="pill" style="background: #eef2ff; color: #4d49fc; font-weight: 600;">Super Admin</span>
                        <button class="ghost-btn small">Edit</button>
                    </div>
                </div>
            </div>
        </section>

        <section class="panel" style="margin-top: 24px;">
            <div class="panel__header">
                <h2>Role Permissions</h2>
            </div>
            <div class="panel__body">
                <div class="permission-list">
                    <div class="permission-item">
                        <div>
                            <p style="font-weight: 600; margin: 0 0 4px 0;">Manage Employees</p>
                            <p class="muted" style="margin: 0; font-size: 0.9rem;">Add, edit, and remove employee records</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="permission-item">
                        <div>
                            <p style="font-weight: 600; margin: 0 0 4px 0;">Approve Attendance</p>
                            <p class="muted" style="margin: 0; font-size: 0.9rem;">Review and approve attendance submissions</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="permission-item">
                        <div>
                            <p style="font-weight: 600; margin: 0 0 4px 0;">Manage Payroll</p>
                            <p class="muted" style="margin: 0; font-size: 0.9rem;">Access and export payroll data</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="permission-item">
                        <div>
                            <p style="font-weight: 600; margin: 0 0 4px 0;">View Analytics</p>
                            <p class="muted" style="margin: 0; font-size: 0.9rem;">Access reports and analytics dashboard</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Notifications Tab -->
    <div id="tab-notifications" class="tab-content">
        <section class="panel">
            <div class="panel__header">
                <h2>Notification Preferences</h2>
            </div>
            <div class="panel__body">
                <div class="permission-list">
                    <div class="permission-item">
                        <div>
                            <p style="font-weight: 600; margin: 0 0 4px 0;">New Job Applications</p>
                            <p class="muted" style="margin: 0; font-size: 0.9rem;">Notify when new applications are received</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="permission-item">
                        <div>
                            <p style="font-weight: 600; margin: 0 0 4px 0;">Attendance Submissions</p>
                            <p class="muted" style="margin: 0; font-size: 0.9rem;">Notify when employees submit attendance</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="permission-item">
                        <div>
                            <p style="font-weight: 600; margin: 0 0 4px 0;">Shift Interest</p>
                            <p class="muted" style="margin: 0; font-size: 0.9rem;">Notify when employees show interest in shifts</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="permission-item">
                        <div>
                            <p style="font-weight: 600; margin: 0 0 4px 0;">Low Attendance Alerts</p>
                            <p class="muted" style="margin: 0; font-size: 0.9rem;">Alert when attendance falls below threshold</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="permission-item">
                        <div>
                            <p style="font-weight: 600; margin: 0 0 4px 0;">Weekly Reports</p>
                            <p class="muted" style="margin: 0; font-size: 0.9rem;">Receive weekly summary reports via email</p>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Client Settings Tab -->
    <div id="tab-client-settings" class="tab-content">
        <section class="panel">
            <div class="panel__header" style="display: flex; justify-content: space-between; align-items: center;">
                <h2>Client Configurations</h2>
                <button class="primary-btn">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" style="margin-right: 6px; vertical-align: middle;">
                        <line x1="12" y1="5" x2="12" y2="19"/>
                        <line x1="5" y1="12" x2="19" y2="12"/>
                    </svg>
                    Add Client
                </button>
            </div>
            <div class="panel__body">
                <div class="client-cards">
                    <div class="client-card">
                        <div class="client-card__content">
                            <div>
                                <h3 style="margin: 0 0 4px 0; font-weight: 600;">Client A - Security Services</h3>
                                <p class="muted" style="margin: 0; font-size: 0.9rem;">London Operations</p>
                            </div>
                            <div style="display: flex; gap: 24px; align-items: center;">
                                <div>
                                    <p class="muted" style="margin: 0 0 4px 0; font-size: 0.85rem;">Pay Rate</p>
                                    <p style="margin: 0; font-weight: 600;">£14.50/hour</p>
                                </div>
                                <div style="text-align: right;">
                                    <p class="muted" style="margin: 0 0 4px 0; font-size: 0.85rem;">Weekly Cycle</p>
                                    <p style="margin: 0; font-weight: 600;">Monday - Sunday</p>
                                </div>
                            </div>
                        </div>
                        <button class="ghost-btn">Configure</button>
                    </div>
                    <div class="client-card">
                        <div class="client-card__content">
                            <div>
                                <h3 style="margin: 0 0 4px 0; font-weight: 600;">Client B - Warehouse Operations</h3>
                                <p class="muted" style="margin: 0; font-size: 0.9rem;">Manchester Hub</p>
                            </div>
                            <div style="display: flex; gap: 24px; align-items: center;">
                                <div>
                                    <p class="muted" style="margin: 0 0 4px 0; font-size: 0.85rem;">Pay Rate</p>
                                    <p style="margin: 0; font-weight: 600;">£13.00/hour</p>
                                </div>
                                <div style="text-align: right;">
                                    <p class="muted" style="margin: 0 0 4px 0; font-size: 0.85rem;">Weekly Cycle</p>
                                    <p style="margin: 0; font-weight: 600;">Sunday - Saturday</p>
                                </div>
                            </div>
                        </div>
                        <button class="ghost-btn">Configure</button>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        // Tab switching functionality
        document.addEventListener('DOMContentLoaded', function() {
            const tabs = document.querySelectorAll('#settingsTabs .tab');
            const tabContents = document.querySelectorAll('.tab-content');

            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const targetTab = this.getAttribute('data-tab');

                    // Remove active class from all tabs and contents
                    tabs.forEach(t => t.classList.remove('active'));
                    tabContents.forEach(tc => tc.classList.remove('active'));

                    // Add active class to clicked tab and corresponding content
                    this.classList.add('active');
                    document.getElementById('tab-' + targetTab).classList.add('active');
                });
            });
        });
    </script>
@endsection