@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">HR Settings</h1>
                    <p class="text-muted">{{ $company->name }} - Centralized HR configuration and management</p>
                </div>
                <div>
                    {{-- <a href="{{ route('companies.hr.dashboard', $company) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to HR Dashboard
                    </a> --}}
                </div>
            </div>
        </div>
    </div>

    <!-- Success Message -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Settings Overview Cards -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="avatar bg-primary text-white rounded-circle me-3">
                            <i class="bi bi-building fs-5"></i>
                        </div>
                        <div>
                            <h6 class="card-title mb-0">Company Settings</h6>
                            <small class="text-muted">Business info & accounts</small>
                        </div>
                    </div>
                    @php
                        $completionPercentage = $hrSettings->setup_completion_percentage;
                    @endphp
                    <div class="progress mb-2" style="height: 6px;">
                        <div class="progress-bar {{ $completionPercentage >= 80 ? 'bg-success' : ($completionPercentage >= 50 ? 'bg-warning' : 'bg-danger') }}"
                             style="width: {{ $completionPercentage }}%"></div>
                    </div>
                    <small class="text-muted">{{ $completionPercentage }}% complete</small>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="avatar bg-info text-white rounded-circle me-3">
                            <i class="bi bi-clock fs-5"></i>
                        </div>
                        <div>
                            <h6 class="card-title mb-0">Attendance & Leave</h6>
                            <small class="text-muted">Clock in rules & policies</small>
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="small text-muted">Working Hours</div>
                            <div class="fw-bold">{{ $attendanceLeaveSettings->daily_working_hours }}h</div>
                        </div>
                        <div class="col-6">
                            <div class="small text-muted">Annual Leave</div>
                            <div class="fw-bold">{{ $attendanceLeaveSettings->annual_leave_entitlement }} days</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="avatar bg-success text-white rounded-circle me-3">
                            <i class="bi bi-currency-dollar fs-5"></i>
                        </div>
                        <div>
                            <h6 class="card-title mb-0">Payroll Settings</h6>
                            <small class="text-muted">EPF, salaries & overtime</small>
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="small text-muted">Working Days</div>
                            <div class="fw-bold">{{ $payrollSettings->standard_working_days_per_month }} days</div>
                        </div>
                        <div class="col-6">
                            <div class="small text-muted">EPF Rate</div>
                            <div class="fw-bold">{{ $payrollSettings->epf_employer_addon_percentage }}%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="avatar bg-warning text-white rounded-circle me-3">
                            <i class="bi bi-receipt fs-5"></i>
                        </div>
                        <div>
                            <h6 class="card-title mb-0">Claim Settings</h6>
                            <small class="text-muted">Expenses & reimbursements</small>
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="small text-muted">Max Auto Approval</div>
                            <div class="fw-bold">RM{{ $claimSettings->auto_approval_limit }}</div>
                        </div>
                        <div class="col-6">
                            <div class="small text-muted">Currency</div>
                            <div class="fw-bold">{{ $claimSettings->claim_currency }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Second Row of Cards -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="avatar bg-secondary text-white rounded-circle me-3">
                            <i class="bi bi-diagram-3 fs-5"></i>
                        </div>
                        <div>
                            <h6 class="card-title mb-0">Organization</h6>
                            <small class="text-muted">Locations & subsidiaries</small>
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="small text-muted">Locations</div>
                            <div class="fw-bold">{{ count($hrSettings->company_locations ?? []) }}</div>
                        </div>
                        <div class="col-6">
                            <div class="small text-muted">Subsidiaries</div>
                            <div class="fw-bold">{{ count($hrSettings->company_subsidiaries ?? []) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="avatar bg-danger text-white rounded-circle me-3">
                            <i class="bi bi-receipt-cutoff fs-5"></i>
                        </div>
                        <div>
                            <h6 class="card-title mb-0">E-invoicing</h6>
                            <small class="text-muted">LHDN compliance & TIN</small>
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="small text-muted">Status</div>
                            <div class="fw-bold {{ $hrSettings->einvoicing_enabled ? 'text-success' : 'text-muted' }}">
                                {{ $hrSettings->einvoicing_enabled ? 'Enabled' : 'Disabled' }}
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="small text-muted">Setup</div>
                            <div class="fw-bold {{ ($hrSettings->tax_identification_number && $hrSettings->msic_code) ? 'text-success' : 'text-warning' }}">
                                {{ ($hrSettings->tax_identification_number && $hrSettings->msic_code) ? 'Ready' : 'Pending' }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Settings Navigation -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">HR Configuration Sections</h5>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        <!-- Company Settings -->
                        <a href="{{ route('companies.hr.settings.company', $company) }}"
                           class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3">
                            <div class="d-flex align-items-center">
                                <div class="avatar bg-primary text-white rounded-circle me-3">
                                    <i class="bi bi-building"></i>
                                </div>
                                <div>
                                    <h6 class="mb-1">Company Settings</h6>
                                    <p class="mb-0 small text-muted">
                                        Business information, banking details, and Malaysian statutory account numbers
                                    </p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                @if($hrSettings->isStatutoryAccountsComplete())
                                    <span class="badge bg-success me-2">Complete</span>
                                @else
                                    <span class="badge bg-warning me-2">{{ $hrSettings->setup_completion_percentage }}%</span>
                                @endif
                                <i class="bi bi-chevron-right"></i>
                            </div>
                        </a>

                        <!-- Attendance & Leave Settings -->
                        <a href="{{ route('companies.hr.settings.attendance-leave', $company) }}"
                           class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3">
                            <div class="d-flex align-items-center">
                                <div class="avatar bg-info text-white rounded-circle me-3">
                                    <i class="bi bi-clock"></i>
                                </div>
                                <div>
                                    <h6 class="mb-1">Attendance & Leave Settings</h6>
                                    <p class="mb-0 small text-muted">
                                        Clock in rules, working hours, leave policies, and approval workflows
                                    </p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <span class="badge bg-info me-2">{{ $attendanceLeaveSettings->daily_working_hours }}h days</span>
                                <i class="bi bi-chevron-right"></i>
                            </div>
                        </a>

                        <!-- Payroll Settings -->
                        <a href="{{ route('companies.hr.payroll-settings.index', $company) }}"
                           class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3">
                            <div class="d-flex align-items-center">
                                <div class="avatar bg-success text-white rounded-circle me-3">
                                    <i class="bi bi-currency-dollar"></i>
                                </div>
                                <div>
                                    <h6 class="mb-1">Payroll Settings</h6>
                                    <p class="mb-0 small text-muted">
                                        EPF settings, overtime rates, allowances, deductions, and payslip configuration
                                    </p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <span class="badge bg-success me-2">Malaysian Compliance</span>
                                <i class="bi bi-chevron-right"></i>
                            </div>
                        </a>

                        <!-- Claim Settings -->
                        <a href="{{ route('companies.hr.settings.claims', $company) }}"
                           class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3">
                            <div class="d-flex align-items-center">
                                <div class="avatar bg-warning text-white rounded-circle me-3">
                                    <i class="bi bi-receipt"></i>
                                </div>
                                <div>
                                    <h6 class="mb-1">Claim Settings</h6>
                                    <p class="mb-0 small text-muted">
                                        Expense claims, approval limits, receipt requirements, and reimbursement policies
                                    </p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <span class="badge bg-warning me-2">RM{{ $claimSettings->max_claim_amount_without_approval }} limit</span>
                                <i class="bi bi-chevron-right"></i>
                            </div>
                        </a>

                        <!-- Organization Settings -->
                        <a href="{{ route('companies.hr.settings.organization', $company) }}"
                           class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3">
                            <div class="d-flex align-items-center">
                                <div class="avatar bg-secondary text-white rounded-circle me-3">
                                    <i class="bi bi-diagram-3"></i>
                                </div>
                                <div>
                                    <h6 class="mb-1">Organization Structure</h6>
                                    <p class="mb-0 small text-muted">
                                        Company locations, subsidiaries, and organizational structure management
                                    </p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <span class="badge bg-secondary me-2">{{ count($hrSettings->company_locations ?? []) + count($hrSettings->company_subsidiaries ?? []) }} items</span>
                                <i class="bi bi-chevron-right"></i>
                            </div>
                        </a>

                        <!-- Departments & Positions -->
                        <a href="{{ route('companies.hr.departments.index', $company) }}"
                           class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3">
                            <div class="d-flex align-items-center">
                                <div class="avatar bg-purple text-white rounded-circle me-3">
                                    <i class="bi bi-people"></i>
                                </div>
                                <div>
                                    <h6 class="mb-1">Departments & Positions</h6>
                                    <p class="mb-0 small text-muted">
                                        Manage company departments, positions, and job roles
                                    </p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <i class="bi bi-chevron-right"></i>
                            </div>
                        </a>

                        <!-- E-invoicing Settings -->
                        <a href="{{ route('companies.hr.settings.einvoicing', $company) }}"
                           class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3">
                            <div class="d-flex align-items-center">
                                <div class="avatar bg-danger text-white rounded-circle me-3">
                                    <i class="bi bi-receipt-cutoff"></i>
                                </div>
                                <div>
                                    <h6 class="mb-1">E-invoicing Settings</h6>
                                    <p class="mb-0 small text-muted">
                                        LHDN e-invoicing compliance, Tax Identification Number, and MSIC codes
                                    </p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <span class="badge {{ $hrSettings->einvoicing_enabled ? 'bg-success' : 'bg-secondary' }} me-2">
                                    {{ $hrSettings->einvoicing_enabled ? 'Enabled' : 'Disabled' }}
                                </span>
                                <i class="bi bi-chevron-right"></i>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions & Status -->
        <div class="col-lg-4">
            <!-- Setup Status -->
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Setup Status</h6>
                </div>
                <div class="card-body">
                    <!-- Company Setup -->
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <div class="fw-bold">Company Information</div>
                            <small class="text-muted">{{ count($hrSettings->completed_statutory_accounts) }}/7 statutory accounts</small>
                        </div>
                        @if($hrSettings->isStatutoryAccountsComplete())
                            <i class="bi bi-check-circle-fill text-success"></i>
                        @else
                            <i class="bi bi-exclamation-circle-fill text-warning"></i>
                        @endif
                    </div>

                    <!-- Banking Setup -->
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <div class="fw-bold">Banking Details</div>
                            <small class="text-muted">Account information</small>
                        </div>
                        @if($hrSettings->isBankingDetailsComplete())
                            <i class="bi bi-check-circle-fill text-success"></i>
                        @else
                            <i class="bi bi-exclamation-circle-fill text-warning"></i>
                        @endif
                    </div>

                    <!-- Payroll Setup -->
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <div class="fw-bold">Payroll Configuration</div>
                            <small class="text-muted">EPF, overtime, payslips</small>
                        </div>
                        @if($payrollSettings->isPayslipConfigurationComplete())
                            <i class="bi bi-check-circle-fill text-success"></i>
                        @else
                            <i class="bi bi-exclamation-circle-fill text-warning"></i>
                        @endif
                    </div>

                    <!-- Claims Setup -->
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="fw-bold">Claims Configuration</div>
                            <small class="text-muted">Approval workflow setup</small>
                        </div>
                        @if($claimSettings->allow_employee_claims)
                            <i class="bi bi-check-circle-fill text-success"></i>
                        @else
                            <i class="bi bi-x-circle-fill text-danger"></i>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Quick Actions</h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        @if(!$hrSettings->isStatutoryAccountsComplete())
                            <a href="{{ route('companies.hr.settings.company', $company) }}" class="btn btn-outline-warning btn-sm">
                                <i class="bi bi-building me-1"></i> Complete Company Setup
                            </a>
                        @endif

                        @if(!$hrSettings->isBankingDetailsComplete())
                            <a href="{{ route('companies.hr.settings.company', $company) }}" class="btn btn-outline-info btn-sm">
                                <i class="bi bi-bank me-1"></i> Add Banking Details
                            </a>
                        @endif

                        <a href="{{ route('companies.hr.payroll-settings.index', $company) }}" class="btn btn-outline-success btn-sm">
                            <i class="bi bi-currency-dollar me-1"></i> Configure Payroll
                        </a>

                        <a href="{{ route('companies.hr.settings.attendance-leave', $company) }}" class="btn btn-outline-primary btn-sm">
                            <i class="bi bi-clock me-1"></i> Set Working Hours
                        </a>
                    </div>
                </div>
            </div>

            <!-- Malaysian Compliance Guide -->
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">Malaysian HR Compliance</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong class="text-primary">Required Registrations:</strong>
                        <ul class="small mt-2">
                            <li>EPF Employer Number (12 digits)</li>
                            <li>SOCSO Employer Number (8 digits)</li>
                            <li>LHDN Employer Number</li>
                            <li>EIS Registration</li>
                        </ul>
                    </div>

                    <div class="mb-3">
                        <strong class="text-success">Employment Act 1955:</strong>
                        <ul class="small mt-2">
                            <li>Maximum 8 hours per day</li>
                            <li>Minimum 1.5x overtime rate</li>
                            <li>Annual leave entitlements</li>
                            <li>Maternity leave (60 days)</li>
                        </ul>
                    </div>

                    <div>
                        <strong class="text-info">Best Practices:</strong>
                        <ul class="small mt-2">
                            <li>Digital attendance tracking</li>
                            <li>Automated payroll processing</li>
                            <li>Compliant payslip generation</li>
                            <li>Leave management system</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bg-purple {
    background-color: #6f42c1 !important;
}
</style>
@endsection