@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">Payslip Settings</h1>
                    <p class="text-muted">{{ $company->name }} - Configure payslip layout, content, and distribution settings</p>
                </div>
                <div>
                    <a href="{{ route('companies.hr.payroll-settings.index', $company) }}" class="btn btn-outline-secondary me-2">
                        <i class="bi bi-arrow-left"></i> Back to Settings
                    </a>
                    <button type="button" class="btn btn-info" onclick="previewPayslip()">
                        <i class="bi bi-eye"></i> Preview Payslip
                    </button>
                </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

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

                <!-- Header Settings -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Header & Company Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Payslip Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('payslip_title') is-invalid @enderror" 
                                       name="payslip_title" value="{{ old('payslip_title', $settings->payslip_title) }}" 
                                       placeholder="PAYSLIP" required>
                                @error('payslip_title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Template Layout <span class="text-danger">*</span></label>
                                <select class="form-select @error('payslip_template') is-invalid @enderror" 
                                        name="payslip_template" required>
                                    <option value="standard" {{ $settings->payslip_template === 'standard' ? 'selected' : '' }}>
                                        Standard Layout
                                    </option>
                                    <option value="detailed" {{ $settings->payslip_template === 'detailed' ? 'selected' : '' }}>
                                        Detailed Layout
                                    </option>
                                    <option value="compact" {{ $settings->payslip_template === 'compact' ? 'selected' : '' }}>
                                        Compact Layout
                                    </option>
                                </select>
                                @error('payslip_template')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Company Address</label>
                                <textarea class="form-control @error('company_address') is-invalid @enderror" 
                                          name="company_address" rows="3" 
                                          placeholder="Enter company address for payslip header">{{ old('company_address', $settings->company_address) }}</textarea>
                                @error('company_address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Company Phone</label>
                                    <input type="text" class="form-control @error('company_phone') is-invalid @enderror" 
                                           name="company_phone" value="{{ old('company_phone', $settings->company_phone) }}" 
                                           placeholder="+60 3-xxxx xxxx">
                                    @error('company_phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div>
                                    <label class="form-label">Company Email</label>
                                    <input type="email" class="form-control @error('company_email') is-invalid @enderror" 
                                           name="company_email" value="{{ old('company_email', $settings->company_email) }}" 
                                           placeholder="hr@company.com">
                                    @error('company_email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="show_company_logo" 
                                           id="show_company_logo" value="1" 
                                           {{ $settings->show_company_logo ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_company_logo">
                                        <i class="bi bi-image text-primary me-1"></i>
                                        <strong>Show Company Logo</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">Display company logo in payslip header</small>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="show_employee_photo" 
                                           id="show_employee_photo" value="1" 
                                           {{ $settings->show_employee_photo ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_employee_photo">
                                        <i class="bi bi-person-circle text-info me-1"></i>
                                        <strong>Show Employee Photo</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">Display employee photo if available</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Content Settings -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Payslip Content Sections</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="show_bank_details" 
                                           id="show_bank_details" value="1" 
                                           {{ $settings->show_bank_details ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_bank_details">
                                        <i class="bi bi-bank text-success me-1"></i>
                                        <strong>Bank Details</strong>
                                    </label>
                                </div>
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="show_attendance_summary" 
                                           id="show_attendance_summary" value="1" 
                                           {{ $settings->show_attendance_summary ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_attendance_summary">
                                        <i class="bi bi-calendar-check text-primary me-1"></i>
                                        <strong>Attendance Summary</strong>
                                    </label>
                                </div>
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="show_leave_balance" 
                                           id="show_leave_balance" value="1" 
                                           {{ $settings->show_leave_balance ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_leave_balance">
                                        <i class="bi bi-calendar-x text-warning me-1"></i>
                                        <strong>Leave Balance</strong>
                                    </label>
                                </div>
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="show_overtime_details" 
                                           id="show_overtime_details" value="1" 
                                           {{ $settings->show_overtime_details ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_overtime_details">
                                        <i class="bi bi-clock text-info me-1"></i>
                                        <strong>Overtime Details</strong>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="show_statutory_contributions" 
                                           id="show_statutory_contributions" value="1" 
                                           {{ $settings->show_statutory_contributions ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_statutory_contributions">
                                        <i class="bi bi-shield-check text-success me-1"></i>
                                        <strong>Statutory Contributions</strong>
                                    </label>
                                </div>
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="show_tax_details" 
                                           id="show_tax_details" value="1" 
                                           {{ $settings->show_tax_details ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_tax_details">
                                        <i class="bi bi-calculator text-danger me-1"></i>
                                        <strong>Tax Details</strong>
                                    </label>
                                </div>
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="show_ytd_summary" 
                                           id="show_ytd_summary" value="1" 
                                           {{ $settings->show_ytd_summary ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_ytd_summary">
                                        <i class="bi bi-graph-up text-primary me-1"></i>
                                        <strong>Year-to-Date Summary</strong>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Malaysian Statutory Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Malaysian Statutory Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="show_epf_number" 
                                           id="show_epf_number" value="1" 
                                           {{ $settings->show_epf_number ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_epf_number">
                                        <i class="bi bi-piggy-bank text-success me-1"></i>
                                        <strong>EPF Number</strong>
                                    </label>
                                </div>
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="show_socso_number" 
                                           id="show_socso_number" value="1" 
                                           {{ $settings->show_socso_number ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_socso_number">
                                        <i class="bi bi-hospital text-info me-1"></i>
                                        <strong>SOCSO Number</strong>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="show_income_tax_number" 
                                           id="show_income_tax_number" value="1" 
                                           {{ $settings->show_income_tax_number ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_income_tax_number">
                                        <i class="bi bi-receipt text-primary me-1"></i>
                                        <strong>Income Tax Number</strong>
                                    </label>
                                </div>
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="show_statutory_rates" 
                                           id="show_statutory_rates" value="1" 
                                           {{ $settings->show_statutory_rates ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_statutory_rates">
                                        <i class="bi bi-percent text-warning me-1"></i>
                                        <strong>Show Contribution Rates</strong>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Footer & Signatures -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Footer & Signatures</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Footer Text</label>
                            <textarea class="form-control @error('payslip_footer_text') is-invalid @enderror" 
                                      name="payslip_footer_text" rows="3" 
                                      placeholder="Additional information to display at bottom of payslip...">{{ old('payslip_footer_text', $settings->payslip_footer_text) }}</textarea>
                            @error('payslip_footer_text')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="show_company_seal" 
                                           id="show_company_seal" value="1" 
                                           {{ $settings->show_company_seal ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_company_seal">
                                        <i class="bi bi-award text-warning me-1"></i>
                                        <strong>Show Company Seal</strong>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="show_hr_signature" 
                                           id="show_hr_signature" value="1" onclick="toggleHrSignature()"
                                           {{ $settings->show_hr_signature ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_hr_signature">
                                        <i class="bi bi-pen text-primary me-1"></i>
                                        <strong>Show HR Signature</strong>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div id="hr_signature_fields" class="row" style="{{ $settings->show_hr_signature ? '' : 'display: none;' }}">
                            <div class="col-md-6">
                                <label class="form-label">HR Signature Name</label>
                                <input type="text" class="form-control @error('hr_signature_name') is-invalid @enderror" 
                                       name="hr_signature_name" value="{{ old('hr_signature_name', $settings->hr_signature_name) }}" 
                                       placeholder="HR Manager Name">
                                @error('hr_signature_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">HR Signature Title</label>
                                <input type="text" class="form-control @error('hr_signature_title') is-invalid @enderror" 
                                       name="hr_signature_title" value="{{ old('hr_signature_title', $settings->hr_signature_title) }}" 
                                       placeholder="HR Manager">
                                @error('hr_signature_title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Security & Distribution -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Security & Email Distribution</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="payslip_password_protected" 
                                           id="payslip_password_protected" value="1" onclick="togglePasswordSettings()"
                                           {{ $settings->payslip_password_protected ? 'checked' : '' }}>
                                    <label class="form-check-label" for="payslip_password_protected">
                                        <i class="bi bi-lock text-danger me-1"></i>
                                        <strong>Password Protect PDFs</strong>
                                    </label>
                                </div>
                                <div id="password_type_field" style="{{ $settings->payslip_password_protected ? '' : 'display: none;' }}">
                                    <label class="form-label">Password Type</label>
                                    <select class="form-select @error('payslip_password_type') is-invalid @enderror" 
                                            name="payslip_password_type">
                                        <option value="employee_id" {{ $settings->payslip_password_type === 'employee_id' ? 'selected' : '' }}>
                                            Employee ID
                                        </option>
                                        <option value="nric_last_4" {{ $settings->payslip_password_type === 'nric_last_4' ? 'selected' : '' }}>
                                            Last 4 digits of NRIC
                                        </option>
                                        <option value="custom" {{ $settings->payslip_password_type === 'custom' ? 'selected' : '' }}>
                                            Custom Password
                                        </option>
                                    </select>
                                    @error('payslip_password_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="auto_email_payslips" 
                                           id="auto_email_payslips" value="1" onclick="toggleEmailSettings()"
                                           {{ $settings->auto_email_payslips ? 'checked' : '' }}>
                                    <label class="form-check-label" for="auto_email_payslips">
                                        <i class="bi bi-envelope text-primary me-1"></i>
                                        <strong>Auto-email Payslips</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">Automatically email payslips to employees</small>
                            </div>
                        </div>

                        <div id="email_settings" style="{{ $settings->auto_email_payslips ? '' : 'display: none;' }}">
                            <div class="mb-3">
                                <label class="form-label">Email Subject <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('payslip_email_subject') is-invalid @enderror" 
                                       name="payslip_email_subject" value="{{ old('payslip_email_subject', $settings->payslip_email_subject) }}" 
                                       placeholder="Payslip for [MONTH] [YEAR]">
                                @error('payslip_email_subject')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Use [MONTH] and [YEAR] placeholders</small>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Email Body</label>
                                <textarea class="form-control @error('payslip_email_body') is-invalid @enderror" 
                                          name="payslip_email_body" rows="4" 
                                          placeholder="Enter email message body...">{{ old('payslip_email_body', $settings->payslip_email_body) }}</textarea>
                                @error('payslip_email_body')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Available placeholders: [EMPLOYEE_NAME], [MONTH], [YEAR], [COMPANY_NAME]</small>
                            </div>
                        </div>
                    </div>
                </div>

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

        <!-- Preview & Templates -->
        <div class="col-lg-4">
            <!-- Template Preview -->
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Template Preview</h6>
                </div>
                <div class="card-body text-center">
                    <div class="payslip-preview border rounded p-3 mb-3" style="background: #f8f9fa;">
                        <div class="payslip-header mb-2">
                            <h6 class="mb-0" id="preview_title">PAYSLIP</h6>
                            <small class="text-muted">{{ $company->name }}</small>
                        </div>
                        <hr class="my-2">
                        <div class="payslip-content text-start">
                            <div class="row small">
                                <div class="col-6">Employee: John Doe</div>
                                <div class="col-6">Period: Dec 2023</div>
                            </div>
                            <div class="row small mt-1">
                                <div class="col-6">Employee ID: EMP001</div>
                                <div class="col-6">Basic: RM3,000.00</div>
                            </div>
                            <div class="row small mt-1" id="preview_sections">
                                <!-- Dynamic sections will be added here -->
                            </div>
                        </div>
                        <hr class="my-2">
                        <div class="small text-muted">Net Pay: RM2,856.00</div>
                    </div>
                    <button type="button" class="btn btn-outline-info btn-sm w-100" onclick="updatePreview()">
                        <i class="bi bi-arrow-clockwise"></i> Update Preview
                    </button>
                </div>
            </div>

            <!-- Template Options -->
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Template Options</h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-outline-primary btn-sm template-option" 
                                data-template="standard">
                            Standard Layout
                        </button>
                        <button type="button" class="btn btn-outline-success btn-sm template-option" 
                                data-template="detailed">
                            Detailed Layout
                        </button>
                        <button type="button" class="btn btn-outline-info btn-sm template-option" 
                                data-template="compact">
                            Compact Layout
                        </button>
                    </div>
                </div>
            </div>

            <!-- Malaysian Standards -->
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">Malaysian Payslip Standards</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong class="text-primary">Required Information:</strong>
                        <ul class="small mt-2">
                            <li>Employee details and employment period</li>
                            <li>Basic salary and allowances breakdown</li>
                            <li>EPF, SOCSO, EIS contributions</li>
                            <li>Income tax deductions if applicable</li>
                        </ul>
                    </div>
                    
                    <div class="mb-3">
                        <strong class="text-success">Best Practices:</strong>
                        <ul class="small mt-2">
                            <li>Clear and professional layout</li>
                            <li>Year-to-date accumulation</li>
                            <li>Statutory contribution numbers</li>
                            <li>Secure PDF protection</li>
                        </ul>
                    </div>
                    
                    <div>
                        <strong class="text-info">Security:</strong>
                        <ul class="small mt-2">
                            <li>Password protect sensitive payslips</li>
                            <li>Controlled email distribution</li>
                            <li>Audit trail for access</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    updatePreview();
    
    // Template option buttons
    document.querySelectorAll('.template-option').forEach(btn => {
        btn.addEventListener('click', function() {
            const template = this.dataset.template;
            document.querySelector('select[name="payslip_template"]').value = template;
            updatePreview();
        });
    });
    
    // Auto-update preview when title changes
    document.querySelector('input[name="payslip_title"]').addEventListener('input', updatePreview);
});

function toggleHrSignature() {
    const checkbox = document.getElementById('show_hr_signature');
    const fields = document.getElementById('hr_signature_fields');
    fields.style.display = checkbox.checked ? '' : 'none';
}

function togglePasswordSettings() {
    const checkbox = document.getElementById('payslip_password_protected');
    const field = document.getElementById('password_type_field');
    field.style.display = checkbox.checked ? '' : 'none';
}

function toggleEmailSettings() {
    const checkbox = document.getElementById('auto_email_payslips');
    const settings = document.getElementById('email_settings');
    settings.style.display = checkbox.checked ? '' : 'none';
}

function updatePreview() {
    const title = document.querySelector('input[name="payslip_title"]').value || 'PAYSLIP';
    const template = document.querySelector('select[name="payslip_template"]').value;
    
    document.getElementById('preview_title').textContent = title;
    
    // Update sections based on enabled checkboxes
    const sections = document.getElementById('preview_sections');
    sections.innerHTML = '';
    
    const enabledSections = [];
    
    if (document.getElementById('show_attendance_summary').checked) {
        enabledSections.push('<div class="col-12">✓ Attendance Summary</div>');
    }
    if (document.getElementById('show_statutory_contributions').checked) {
        enabledSections.push('<div class="col-12">✓ EPF/SOCSO/EIS</div>');
    }
    if (document.getElementById('show_ytd_summary').checked) {
        enabledSections.push('<div class="col-12">✓ YTD Summary</div>');
    }
    if (document.getElementById('show_bank_details').checked) {
        enabledSections.push('<div class="col-12">✓ Bank Details</div>');
    }
    
    sections.innerHTML = enabledSections.slice(0, 4).join('');
    
    // Update preview styling based on template
    const preview = document.querySelector('.payslip-preview');
    preview.className = 'payslip-preview border rounded p-3 mb-3';
    
    switch(template) {
        case 'detailed':
            preview.classList.add('bg-light');
            preview.style.fontSize = '0.85rem';
            break;
        case 'compact':
            preview.classList.add('bg-white');
            preview.style.fontSize = '0.75rem';
            break;
        default:
            preview.classList.add('bg-light');
            preview.style.fontSize = '0.8rem';
    }
}

function previewPayslip() {
    // This would open a modal or new window with full payslip preview
    alert('Payslip preview functionality would be implemented here with actual employee data.');
}
</script>
@endpush
@endsection