@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">Claim Settings</h1>
                    <p class="text-muted">{{ $company->name }} - Expense claims, approval limits, and reimbursement policies</p>
                </div>
                <div>
                    <a href="{{ route('companies.hr.settings', $company) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to HR Settings
                    </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

    <!-- Quick Setup Templates -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Quick Setup Templates</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <button type="button" class="btn btn-outline-primary w-100 mb-2" onclick="loadTemplate('startup')">
                                <i class="bi bi-rocket"></i><br>
                                <small>Startup</small><br>
                                <small class="text-muted">Basic claims</small>
                            </button>
                        </div>
                        <div class="col-md-3">
                            <button type="button" class="btn btn-outline-success w-100 mb-2" onclick="loadTemplate('corporate')">
                                <i class="bi bi-building"></i><br>
                                <small>Corporate</small><br>
                                <small class="text-muted">Full benefits</small>
                            </button>
                        </div>
                        <div class="col-md-3">
                            <button type="button" class="btn btn-outline-info w-100 mb-2" onclick="loadTemplate('manufacturing')">
                                <i class="bi bi-gear"></i><br>
                                <small>Manufacturing</small><br>
                                <small class="text-muted">Industrial focused</small>
                            </button>
                        </div>
                        <div class="col-md-3">
                            <button type="button" class="btn btn-outline-warning w-100 mb-2" onclick="loadTemplate('retail')">
                                <i class="bi bi-shop"></i><br>
                                <small>Retail</small><br>
                                <small class="text-muted">Customer facing</small>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Claim Settings Form -->
        <div class="col-lg-8">
            <form method="POST" action="{{ route('companies.hr.settings.claims.update', $company) }}">
                @csrf
                @method('PUT')

                <!-- General Claim Settings -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">General Claim Settings</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="allow_employee_claims" 
                                           value="1" {{ $settings->allow_employee_claims ? 'checked' : '' }} id="allowClaims">
                                    <label class="form-check-label" for="allowClaims">
                                        <strong>Enable Employee Claims</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">Allow employees to submit expense claims</small>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="require_receipts" 
                                           value="1" {{ $settings->require_receipts ? 'checked' : '' }} id="requireReceipts">
                                    <label class="form-check-label" for="requireReceipts">
                                        <strong>Require Receipts</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">Mandatory receipt uploads for all claims</small>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label">Claim Currency</label>
                                <select class="form-select @error('claim_currency') is-invalid @enderror" name="claim_currency">
                                    <option value="MYR" {{ $settings->claim_currency === 'MYR' ? 'selected' : '' }}>Malaysian Ringgit (MYR)</option>
                                    <option value="USD" {{ $settings->claim_currency === 'USD' ? 'selected' : '' }}>US Dollar (USD)</option>
                                    <option value="SGD" {{ $settings->claim_currency === 'SGD' ? 'selected' : '' }}>Singapore Dollar (SGD)</option>
                                    <option value="EUR" {{ $settings->claim_currency === 'EUR' ? 'selected' : '' }}>Euro (EUR)</option>
                                </select>
                                @error('claim_currency')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Submission Deadline</label>
                                <div class="input-group">
                                    <input type="number" min="1" max="365" class="form-control @error('claim_submission_deadline_days') is-invalid @enderror" 
                                           name="claim_submission_deadline_days" value="{{ old('claim_submission_deadline_days', $settings->claim_submission_deadline_days ?? 30) }}">
                                    <span class="input-group-text">days</span>
                                </div>
                                @error('claim_submission_deadline_days')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">After expense incurred</small>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check form-switch mt-4">
                                    <input class="form-check-input" type="checkbox" name="allow_foreign_currency_claims" 
                                           value="1" {{ $settings->allow_foreign_currency_claims ? 'checked' : '' }} id="foreignCurrency">
                                    <label class="form-check-label" for="foreignCurrency">
                                        Allow Foreign Currency
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Approval Settings -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Approval Workflow</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="auto_approve_under_limit" 
                                           value="1" {{ $settings->auto_approve_under_limit ? 'checked' : '' }} id="autoApprove">
                                    <label class="form-check-label" for="autoApprove">
                                        <strong>Auto Approve Under Limit</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">Automatically approve claims below threshold</small>
                            </div>
                            <div class="col-md-6" id="autoApprovalLimitDiv">
                                <label class="form-label">Auto Approval Limit</label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" step="0.01" min="0" class="form-control @error('auto_approval_limit') is-invalid @enderror" 
                                           name="auto_approval_limit" value="{{ old('auto_approval_limit', $settings->auto_approval_limit ?? 50.00) }}">
                                </div>
                                @error('auto_approval_limit')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="require_manager_approval" 
                                           value="1" {{ $settings->require_manager_approval ? 'checked' : '' }} id="managerApproval">
                                    <label class="form-check-label" for="managerApproval">
                                        Require Manager Approval
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="require_finance_approval" 
                                           value="1" {{ $settings->require_finance_approval ? 'checked' : '' }} id="financeApproval">
                                    <label class="form-check-label" for="financeApproval">
                                        Require Finance Approval
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4" id="financeThresholdDiv">
                                <label class="form-label">Finance Approval Threshold</label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" step="0.01" min="0" class="form-control @error('finance_approval_threshold') is-invalid @enderror" 
                                           name="finance_approval_threshold" value="{{ old('finance_approval_threshold', $settings->finance_approval_threshold ?? 500.00) }}">
                                </div>
                                @error('finance_approval_threshold')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-label">Approval Timeout</label>
                                <div class="input-group">
                                    <input type="number" min="1" max="30" class="form-control @error('approval_timeout_days') is-invalid @enderror" 
                                           name="approval_timeout_days" value="{{ old('approval_timeout_days', $settings->approval_timeout_days ?? 7) }}">
                                    <span class="input-group-text">days</span>
                                </div>
                                @error('approval_timeout_days')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Auto-escalate after timeout</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Max Claim Without Approval</label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" step="0.01" min="0" class="form-control @error('max_claim_amount_without_approval') is-invalid @enderror" 
                                           name="max_claim_amount_without_approval" value="{{ old('max_claim_amount_without_approval', $settings->max_claim_amount_without_approval ?? 100.00) }}">
                                </div>
                                @error('max_claim_amount_without_approval')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Receipt Requirements -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Receipt Requirements</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="require_original_receipts" 
                                           value="1" {{ $settings->require_original_receipts ? 'checked' : '' }} id="originalReceipts">
                                    <label class="form-check-label" for="originalReceipts">
                                        Require Original Receipts
                                    </label>
                                </div>
                                <small class="form-text text-muted">Physical receipts for reimbursement</small>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="require_gst_details" 
                                           value="1" {{ $settings->require_gst_details ? 'checked' : '' }} id="gstDetails">
                                    <label class="form-check-label" for="gstDetails">
                                        Require GST Details
                                    </label>
                                </div>
                                <small class="form-text text-muted">GST number and amount for tax claims</small>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Accepted File Formats</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="accepted_receipt_formats[]" value="pdf" 
                                           {{ in_array('pdf', $settings->accepted_receipt_formats ?? []) ? 'checked' : '' }} id="formatPdf">
                                    <label class="form-check-label" for="formatPdf">PDF</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="accepted_receipt_formats[]" value="jpg" 
                                           {{ in_array('jpg', $settings->accepted_receipt_formats ?? []) ? 'checked' : '' }} id="formatJpg">
                                    <label class="form-check-label" for="formatJpg">JPG</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="accepted_receipt_formats[]" value="png" 
                                           {{ in_array('png', $settings->accepted_receipt_formats ?? []) ? 'checked' : '' }} id="formatPng">
                                    <label class="form-check-label" for="formatPng">PNG</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Max File Size</label>
                                <div class="input-group">
                                    <input type="number" step="0.1" min="0.1" max="50" class="form-control @error('max_receipt_file_size_mb') is-invalid @enderror" 
                                           name="max_receipt_file_size_mb" value="{{ old('max_receipt_file_size_mb', $settings->max_receipt_file_size_mb ?? 5.0) }}">
                                    <span class="input-group-text">MB</span>
                                </div>
                                @error('max_receipt_file_size_mb')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror

                                <div class="form-check form-switch mt-3">
                                    <input class="form-check-input" type="checkbox" name="ocr_receipt_scanning" 
                                           value="1" {{ $settings->ocr_receipt_scanning ? 'checked' : '' }} id="ocrScanning">
                                    <label class="form-check-label" for="ocrScanning">
                                        OCR Receipt Scanning
                                    </label>
                                </div>
                                <small class="form-text text-muted">Auto-extract data from receipts</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Claim Categories -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Claim Categories & Limits</h5>
                    </div>
                    <div class="card-body">
                        <!-- Travel Claims -->
                        <div class="row mb-4">
                            <div class="col-md-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="allow_travel_claims" 
                                           value="1" {{ $settings->allow_travel_claims ? 'checked' : '' }} id="travelClaims">
                                    <label class="form-check-label" for="travelClaims">
                                        <strong>Travel Claims</strong>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Mileage Rate</label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" step="0.01" min="0" class="form-control" 
                                           name="travel_mileage_rate" value="{{ old('travel_mileage_rate', $settings->travel_mileage_rate ?? 0.60) }}">
                                    <span class="input-group-text">/km</span>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Daily Meal Allowance</label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" step="0.01" min="0" class="form-control" 
                                           name="daily_meal_allowance" value="{{ old('daily_meal_allowance', $settings->daily_meal_allowance ?? 50.00) }}">
                                </div>
                            </div>
                        </div>

                        <!-- Entertainment Claims -->
                        <div class="row mb-4">
                            <div class="col-md-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="allow_entertainment_claims" 
                                           value="1" {{ $settings->allow_entertainment_claims ? 'checked' : '' }} id="entertainmentClaims">
                                    <label class="form-check-label" for="entertainmentClaims">
                                        <strong>Entertainment Claims</strong>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Monthly Limit</label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" step="0.01" min="0" class="form-control" 
                                           name="max_entertainment_per_month" value="{{ old('max_entertainment_per_month', $settings->max_entertainment_per_month ?? 200.00) }}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check form-switch mt-4">
                                    <input class="form-check-input" type="checkbox" name="require_business_justification" 
                                           value="1" {{ $settings->require_business_justification ? 'checked' : '' }} id="businessJustification">
                                    <label class="form-check-label" for="businessJustification">
                                        Require Business Justification
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check form-switch mt-4">
                                    <input class="form-check-input" type="checkbox" name="require_attendee_list_entertainment" 
                                           value="1" {{ $settings->require_attendee_list_entertainment ? 'checked' : '' }} id="attendeeList">
                                    <label class="form-check-label" for="attendeeList">
                                        Require Attendee List
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Medical Claims -->
                        <div class="row mb-4">
                            <div class="col-md-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="allow_medical_claims" 
                                           value="1" {{ $settings->allow_medical_claims ? 'checked' : '' }} id="medicalClaims">
                                    <label class="form-check-label" for="medicalClaims">
                                        <strong>Medical Claims</strong>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Annual Limit</label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" step="0.01" min="0" class="form-control" 
                                           name="annual_medical_limit" value="{{ old('annual_medical_limit', $settings->annual_medical_limit ?? 1000.00) }}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check form-switch mt-4">
                                    <input class="form-check-input" type="checkbox" name="require_medical_certificate" 
                                           value="1" {{ $settings->require_medical_certificate ? 'checked' : '' }} id="medicalCert">
                                    <label class="form-check-label" for="medicalCert">
                                        Require Medical Certificate
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check form-switch mt-4">
                                    <input class="form-check-input" type="checkbox" name="family_medical_coverage" 
                                           value="1" {{ $settings->family_medical_coverage ? 'checked' : '' }} id="familyCoverage">
                                    <label class="form-check-label" for="familyCoverage">
                                        Family Coverage
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Training Claims -->
                        <div class="row mb-4">
                            <div class="col-md-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="allow_training_claims" 
                                           value="1" {{ $settings->allow_training_claims ? 'checked' : '' }} id="trainingClaims">
                                    <label class="form-check-label" for="trainingClaims">
                                        <strong>Training Claims</strong>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Annual Budget per Employee</label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" step="0.01" min="0" class="form-control" 
                                           name="annual_training_budget_per_employee" value="{{ old('annual_training_budget_per_employee', $settings->annual_training_budget_per_employee ?? 2000.00) }}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check form-switch mt-4">
                                    <input class="form-check-input" type="checkbox" name="require_training_approval_advance" 
                                           value="1" {{ $settings->require_training_approval_advance ? 'checked' : '' }} id="trainingAdvanceApproval">
                                    <label class="form-check-label" for="trainingAdvanceApproval">
                                        Require Advance Approval
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check form-switch mt-4">
                                    <input class="form-check-input" type="checkbox" name="require_training_certificate" 
                                           value="1" {{ $settings->require_training_certificate ? 'checked' : '' }} id="trainingCert">
                                    <label class="form-check-label" for="trainingCert">
                                        Require Certificate
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Petty Cash -->
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="allow_petty_cash_claims" 
                                           value="1" {{ $settings->allow_petty_cash_claims ? 'checked' : '' }} id="pettyCash">
                                    <label class="form-check-label" for="pettyCash">
                                        <strong>Petty Cash Claims</strong>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Max Petty Cash Amount</label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" step="0.01" min="0" class="form-control" 
                                           name="max_petty_cash_amount" value="{{ old('max_petty_cash_amount', $settings->max_petty_cash_amount ?? 50.00) }}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Monthly Phone Allowance</label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" step="0.01" min="0" class="form-control" 
                                           name="monthly_phone_allowance" value="{{ old('monthly_phone_allowance', $settings->monthly_phone_allowance ?? 100.00) }}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Monthly Internet Allowance</label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" step="0.01" min="0" class="form-control" 
                                           name="monthly_internet_allowance" value="{{ old('monthly_internet_allowance', $settings->monthly_internet_allowance ?? 80.00) }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Integration & Payment Settings -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Integration & Payment Settings</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="allow_advance_payments" 
                                           value="1" {{ $settings->allow_advance_payments ? 'checked' : '' }} id="advancePayments">
                                    <label class="form-check-label" for="advancePayments">
                                        Allow Advance Payments
                                    </label>
                                </div>
                                <small class="form-text text-muted">Prepayment for expenses</small>
                            </div>
                            <div class="col-md-4" id="advancePercentageDiv">
                                <label class="form-label">Max Advance Percentage</label>
                                <div class="input-group">
                                    <input type="number" min="1" max="100" class="form-control" 
                                           name="max_advance_percentage" value="{{ old('max_advance_percentage', $settings->max_advance_percentage ?? 50) }}">
                                    <span class="input-group-text">%</span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="link_to_payroll_reimbursement" 
                                           value="1" {{ $settings->link_to_payroll_reimbursement ? 'checked' : '' }} id="payrollLink">
                                    <label class="form-check-label" for="payrollLink">
                                        Link to Payroll Reimbursement
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="integrate_with_accounting_system" 
                                           value="1" {{ $settings->integrate_with_accounting_system ? 'checked' : '' }} id="accountingIntegration">
                                    <label class="form-check-label" for="accountingIntegration">
                                        Integrate with Accounting System
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4" id="accountingSystemDiv">
                                <label class="form-label">Accounting System</label>
                                <select class="form-select" name="accounting_system_type">
                                    <option value="">Select System</option>
                                    <option value="sql_account" {{ $settings->accounting_system_type === 'sql_account' ? 'selected' : '' }}>SQL Account</option>
                                    <option value="autocount" {{ $settings->accounting_system_type === 'autocount' ? 'selected' : '' }}>AutoCount</option>
                                    <option value="quickbooks" {{ $settings->accounting_system_type === 'quickbooks' ? 'selected' : '' }}>QuickBooks</option>
                                    <option value="sage" {{ $settings->accounting_system_type === 'sage' ? 'selected' : '' }}>Sage</option>
                                    <option value="custom" {{ $settings->accounting_system_type === 'custom' ? 'selected' : '' }}>Custom API</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="auto_generate_payment_vouchers" 
                                           value="1" {{ $settings->auto_generate_payment_vouchers ? 'checked' : '' }} id="autoVouchers">
                                    <label class="form-check-label" for="autoVouchers">
                                        Auto Generate Payment Vouchers
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Notification Settings -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Notification Settings</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="email_notifications_enabled" 
                                           value="1" {{ $settings->email_notifications_enabled ? 'checked' : '' }} id="emailNotifications">
                                    <label class="form-check-label" for="emailNotifications">
                                        Email Notifications
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="sms_notifications_enabled" 
                                           value="1" {{ $settings->sms_notifications_enabled ? 'checked' : '' }} id="smsNotifications">
                                    <label class="form-check-label" for="smsNotifications">
                                        SMS Notifications
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Payment Reminder</label>
                                <div class="input-group">
                                    <input type="number" min="1" max="30" class="form-control" 
                                           name="payment_reminder_days" value="{{ old('payment_reminder_days', $settings->payment_reminder_days ?? 3) }}">
                                    <span class="input-group-text">days</span>
                                </div>
                                <small class="form-text text-muted">Before due date</small>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-end">
                    <a href="{{ route('companies.hr.settings', $company) }}" 
                       class="btn btn-secondary me-2">Cancel</a>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-circle"></i> Update Claim Settings
                    </button>
                </div>
            </form>
        </div>

        <!-- Sidebar Info -->
        <div class="col-lg-4">
            <!-- Current Configuration Status -->
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Current Configuration</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>Employee Claims</span>
                            @if($settings->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>
                        <small class="text-muted">
                            @if($settings->allow_employee_claims)
                                Employees can submit claims
                            @else
                                Claims system disabled
                            @endif
                        </small>
                    </div>

                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>Auto Approval Limit</span>
                            <strong>RM{{ number_format($settings->auto_approval_limit ?? 0, 2) }}</strong>
                        </div>
                        <small class="text-muted">Claims below this amount are auto-approved</small>
                    </div>

                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>Claim Categories</span>
                            <span class="badge bg-primary">
                                {{ collect([
                                    $settings->allow_travel_claims ? 'Travel' : null,
                                    $settings->allow_entertainment_claims ? 'Entertainment' : null,
                                    $settings->allow_medical_claims ? 'Medical' : null,
                                    $settings->allow_training_claims ? 'Training' : null,
                                    $settings->allow_petty_cash_claims ? 'Petty Cash' : null
                                ])->filter()->count() }} enabled
                            </span>
                        </div>
                    </div>

                    <div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span>Currency</span>
                            <strong>{{ $settings->claim_currency ?? 'MYR' }}</strong>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Malaysian Compliance Guide -->
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Malaysian Tax Compliance</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong class="text-primary">Business Expenses (Tax Deductible):</strong>
                        <ul class="small mt-2">
                            <li>Travel and transportation</li>
                            <li>Business entertainment (limited)</li>
                            <li>Training and development</li>
                            <li>Office supplies and equipment</li>
                        </ul>
                    </div>

                    <div class="mb-3">
                        <strong class="text-warning">Documentation Required:</strong>
                        <ul class="small mt-2">
                            <li>Original receipts with GST details</li>
                            <li>Business justification</li>
                            <li>Approval documentation</li>
                            <li>Attendee lists for entertainment</li>
                        </ul>
                    </div>

                    <div>
                        <strong class="text-info">GST Requirements:</strong>
                        <ul class="small mt-2">
                            <li>Valid GST number on receipts</li>
                            <li>Separate GST amount shown</li>
                            <li>Supplier registration details</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Quick Calculation Tool -->
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">Claim Calculator</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Claim Amount</label>
                        <div class="input-group">
                            <span class="input-group-text">RM</span>
                            <input type="number" step="0.01" min="0" class="form-control" id="calculatorAmount" placeholder="0.00">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Category</label>
                        <select class="form-select" id="calculatorCategory">
                            <option value="general">General</option>
                            <option value="travel">Travel</option>
                            <option value="entertainment">Entertainment</option>
                            <option value="medical">Medical</option>
                            <option value="training">Training</option>
                        </select>
                    </div>
                    
                    <div id="calculatorResult" class="alert alert-info" style="display: none;">
                        <div id="approvalStatus"></div>
                        <div id="approvalFlow"></div>
                    </div>
                    
                    <button type="button" class="btn btn-outline-primary btn-sm w-100" onclick="calculateClaim()">
                        Calculate Approval Flow
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle visibility based on checkbox states
    function toggleVisibility() {
        const autoApprove = document.getElementById('autoApprove').checked;
        const financeApproval = document.getElementById('financeApproval').checked;
        const advancePayments = document.getElementById('advancePayments').checked;
        const accountingIntegration = document.getElementById('accountingIntegration').checked;

        document.getElementById('autoApprovalLimitDiv').style.display = autoApprove ? 'block' : 'none';
        document.getElementById('financeThresholdDiv').style.display = financeApproval ? 'block' : 'none';
        document.getElementById('advancePercentageDiv').style.display = advancePayments ? 'block' : 'none';
        document.getElementById('accountingSystemDiv').style.display = accountingIntegration ? 'block' : 'none';
    }

    // Add event listeners
    document.getElementById('autoApprove').addEventListener('change', toggleVisibility);
    document.getElementById('financeApproval').addEventListener('change', toggleVisibility);
    document.getElementById('advancePayments').addEventListener('change', toggleVisibility);
    document.getElementById('accountingIntegration').addEventListener('change', toggleVisibility);

    // Initialize visibility
    toggleVisibility();
});

// Template loading functions
function loadTemplate(templateType) {
    const templates = {
        startup: {
            allow_employee_claims: true,
            auto_approval_limit: 100,
            require_manager_approval: true,
            require_finance_approval: false,
            allow_travel_claims: true,
            allow_entertainment_claims: false,
            allow_medical_claims: true,
            annual_medical_limit: 500,
            allow_training_claims: true,
            annual_training_budget_per_employee: 1000
        },
        corporate: {
            allow_employee_claims: true,
            auto_approval_limit: 200,
            require_manager_approval: true,
            require_finance_approval: true,
            finance_approval_threshold: 1000,
            allow_travel_claims: true,
            allow_entertainment_claims: true,
            max_entertainment_per_month: 500,
            allow_medical_claims: true,
            annual_medical_limit: 2000,
            allow_training_claims: true,
            annual_training_budget_per_employee: 3000
        },
        manufacturing: {
            allow_employee_claims: true,
            auto_approval_limit: 50,
            require_manager_approval: true,
            require_finance_approval: true,
            allow_travel_claims: true,
            allow_entertainment_claims: false,
            allow_medical_claims: true,
            annual_medical_limit: 1500,
            require_original_receipts: true,
            allow_petty_cash_claims: true,
            max_petty_cash_amount: 100
        },
        retail: {
            allow_employee_claims: true,
            auto_approval_limit: 75,
            require_manager_approval: true,
            allow_travel_claims: true,
            travel_mileage_rate: 0.70,
            allow_entertainment_claims: true,
            max_entertainment_per_month: 300,
            allow_medical_claims: true,
            annual_medical_limit: 1000,
            monthly_phone_allowance: 150
        }
    };

    const template = templates[templateType];
    if (template) {
        Object.keys(template).forEach(key => {
            const input = document.querySelector(`[name="${key}"]`);
            if (input) {
                if (input.type === 'checkbox') {
                    input.checked = template[key];
                } else {
                    input.value = template[key];
                }
            }
        });
        
        // Show confirmation
        alert(`${templateType.charAt(0).toUpperCase() + templateType.slice(1)} template loaded successfully!`);
    }
}

// Claim calculator
function calculateClaim() {
    const amount = parseFloat(document.getElementById('calculatorAmount').value) || 0;
    const category = document.getElementById('calculatorCategory').value;
    const autoApprovalLimit = {{ $settings->auto_approval_limit ?? 50 }};
    const financeThreshold = {{ $settings->finance_approval_threshold ?? 500 }};
    const requireManager = {{ $settings->require_manager_approval ? 'true' : 'false' }};
    const requireFinance = {{ $settings->require_finance_approval ? 'true' : 'false' }};

    let status = '';
    let flow = '';

    if (amount <= autoApprovalLimit) {
        status = '<strong class="text-success">Auto-Approved</strong>';
        flow = 'No manual approval required';
    } else if (amount <= financeThreshold) {
        if (requireManager) {
            status = '<strong class="text-warning">Manager Approval Required</strong>';
            flow = 'Employee → Manager → Approved';
        } else {
            status = '<strong class="text-success">Auto-Approved</strong>';
            flow = 'Direct approval';
        }
    } else {
        if (requireFinance) {
            status = '<strong class="text-danger">Finance Approval Required</strong>';
            flow = 'Employee → Manager → Finance → Approved';
        } else if (requireManager) {
            status = '<strong class="text-warning">Manager Approval Required</strong>';
            flow = 'Employee → Manager → Approved';
        }
    }

    document.getElementById('approvalStatus').innerHTML = status;
    document.getElementById('approvalFlow').innerHTML = flow;
    document.getElementById('calculatorResult').style.display = 'block';
}
</script>
@endpush
@endsection