@extends('layouts.app')

@section('title', 'Settings')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="mb-0">System Settings</h4>
        <p class="text-muted mb-0">Manage your system configuration</p>
    </div>
</div>

<div class="row">
    {{-- Company Settings --}}
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                    <div class="avatar bg-label-primary me-3">
                        <span class="avatar-initial rounded">
                            <i class="ti ti-building fs-3"></i>
                        </span>
                    </div>
                    <div>
                        <h5 class="mb-0">Company Profile</h5>
                        <p class="text-muted small mb-0">Manage company information</p>
                    </div>
                </div>
                <p class="mb-3">Update your company details, contact information, and branding.</p>
                <a href="{{ route('settings.company') }}" class="btn btn-primary">
                    <i class="bi bi-gear me-2"></i>Configure
                </a>
            </div>
        </div>
    </div>

    {{-- User & Roles Settings --}}
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                    <div class="avatar bg-label-success me-3">
                        <span class="avatar-initial rounded">
                            <i class="ti ti-users fs-3"></i>
                        </span>
                    </div>
                    <div>
                        <h5 class="mb-0">User Management</h5>
                        <p class="text-muted small mb-0">Manage users and permissions</p>
                    </div>
                </div>
                <p class="mb-3">Create and manage user accounts, assign roles and permissions.</p>
                <a href="{{ route('users.index') }}" class="btn btn-success">
                    <i class="bi bi-person-plus me-2"></i>Manage Users
                </a>
            </div>
        </div>
    </div>

    {{-- Roles & Permissions --}}
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <div class="avatar bg-label-warning me-3">
                        <span class="avatar-initial rounded">
                            <i class="ti ti-shield-lock fs-3"></i>
                        </span>
                    </div>
                    <div>
                        <h5 class="mb-0">Roles & Permissions</h5>
                        <p class="text-muted small mb-0">Configure access control</p>
                    </div>
                </div>
                <p class="mb-3">Define roles and set permissions for different user groups.</p>
                <a href="{{ route('roles.index') }}" class="btn btn-warning">
                    <i class="bi bi-shield-check me-2"></i>Manage Roles
                </a>
            </div>
        </div>
    </div>

    {{-- Payroll Settings --}}
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                    <div class="avatar bg-label-info me-3">
                        <span class="avatar-initial rounded">
                            <i class="ti ti-calculator fs-3"></i>
                        </span>
                    </div>
                    <div>
                        <h5 class="mb-0">Payroll Rules</h5>
                        <p class="text-muted small mb-0">Configure payroll settings</p>
                    </div>
                </div>
                <p class="mb-3">Set up payroll calculation rules, payday, and tax configurations.</p>
                <a href="{{ route('payroll-rules.index') }}" class="btn btn-info">
                    <i class="bi bi-gear me-2"></i>Configure
                </a>
            </div>
        </div>
    </div>

    {{-- Attendance Settings --}}
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                    <div class="avatar bg-label-danger me-3">
                        <span class="avatar-initial rounded">
                            <i class="ti ti-calendar-check fs-3"></i>
                        </span>
                    </div>
                    <div>
                        <h5 class="mb-0">Attendance Rules</h5>
                        <p class="text-muted small mb-0">Configure attendance policies</p>
                    </div>
                </div>
                <p class="mb-3">Set working hours, late penalties, and attendance policies.</p>
                <a href="{{ route('attendance-rules.index') }}" class="btn btn-danger">
                    <i class="bi bi-gear me-2"></i>Configure
                </a>
            </div>
        </div>
    </div>

    {{-- Leave Settings --}}
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                    <div class="avatar bg-label-secondary me-3">
                        <span class="avatar-initial rounded">
                            <i class="ti ti-calendar-event fs-3"></i>
                        </span>
                    </div>
                    <div>
                        <h5 class="mb-0">Leave Types</h5>
                        <p class="text-muted small mb-0">Manage leave categories</p>
                    </div>
                </div>
                <p class="mb-3">Configure leave types, quotas, and leave policies.</p>
                <a href="{{ route('leave-types.index') }}" class="btn btn-secondary">
                    <i class="bi bi-gear me-2"></i>Configure
                </a>
            </div>
        </div>
    </div>
</div>

{{-- System Information --}}
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">System Information</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <table class="table table-borderless">
                    <tr>
                        <td class="text-muted" width="40%">System Version</td>
                        <td><strong>1.0.0</strong></td>
                    </tr>
                    <tr>
                        <td class="text-muted">Laravel Version</td>
                        <td><strong>{{ app()->version() }}</strong></td>
                    </tr>
                    <tr>
                        <td class="text-muted">PHP Version</td>
                        <td><strong>{{ phpversion() }}</strong></td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6">
                <table class="table table-borderless">
                    <tr>
                        <td class="text-muted" width="40%">Company</td>
                        <td><strong>{{ session('company_name', 'N/A') }}</strong></td>
                    </tr>
                    <tr>
                        <td class="text-muted">Current User</td>
                        <td><strong>{{ auth()->user()->name }}</strong></td>
                    </tr>
                    <tr>
                        <td class="text-muted">User Role</td>
                        <td>
                            @foreach(auth()->user()->roles as $role)
                                <span class="badge bg-label-primary">{{ $role->name }}</span>
                            @endforeach
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection