@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">Edit Payroll</h1>
                    <p class="text-muted">{{ $company->name }} - {{ $payroll->payroll_period }}</p>
                </div>
                <div>
                    <a href="{{ route('companies.hr.payroll.show', [$company, $payroll]) }}" class="btn btn-outline-primary me-2">
                        <i class="bi bi-eye"></i> View Details
                    </a>
                    <a href="{{ route('companies.hr.payroll.index', $company) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Payroll
                    </a>
                </div>
            </div>
        </div>
    </div>

    <form method="POST" action="{{ route('companies.hr.payroll.update', [$company, $payroll]) }}" id="payrollForm">
        @csrf
        @method('PUT')
        <div class="row">
            <!-- Left Column - Main Form -->
            <div class="col-lg-8">
                <!-- Employee & Period Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Employee & Period Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Employee</label>
                                <input type="text" class="form-control" value="{{ $payroll->employee->full_name ?? $payroll->employee->first_name . ' ' . $payroll->employee->last_name }}" readonly>
                                <input type="hidden" name="employee_id" value="{{ $payroll->employee_id }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Period</label>
                                <input type="text" class="form-control" value="{{ $payroll->payroll_period }}" readonly>
                                <input type="hidden" name="payroll_period" value="{{ $payroll->payroll_period }}">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Pay Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('pay_date') is-invalid @enderror"
                                       name="pay_date" value="{{ old('pay_date', $payroll->pay_date->format('Y-m-d')) }}" required>
                                @error('pay_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Worked (months) <span class="text-danger">*</span></label>
                                <input type="number" class="form-control @error('worked_months') is-invalid @enderror"
                                       name="worked_months" id="workedMonths" value="{{ old('worked_months', $payroll->worked_months ?? 1) }}"
                                       min="0" max="12" step="0.1" required>
                                @error('worked_months')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Period Start <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('period_start') is-invalid @enderror"
                                       name="period_start" value="{{ old('period_start', $payroll->period_start->format('Y-m-d')) }}" required>
                                @error('period_start')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Period End <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('period_end') is-invalid @enderror"
                                       name="period_end" value="{{ old('period_end', $payroll->period_end->format('Y-m-d')) }}" required>
                                @error('period_end')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Basic Earnings -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Basic Earnings</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Base Salary (RM) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" step="0.01" class="form-control @error('base_salary') is-invalid @enderror"
                                           name="base_salary" id="baseSalary" value="{{ old('base_salary', $payroll->base_salary) }}" required>
                                </div>
                                @error('base_salary')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Additional Earnings -->
                @php
                    $additionItems = $payroll->lineItems->where('type.type', 'addition');
                @endphp
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Additional Earnings</h5>
                    </div>
                    <div class="card-body">
                        <div id="additionalEarnings">
                            @foreach($additionItems as $index => $item)
                                <div class="line-item mb-3" data-type="addition">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <label class="form-label small">{{ $item->type->name }}</label>
                                            <input type="hidden" name="line_items[{{ $index }}][id]" value="{{ $item->id }}">
                                            <input type="hidden" name="line_items[{{ $index }}][type_id]" value="{{ $item->type_id }}">
                                            <div class="text-muted small">{{ $item->type->description }}</div>
                                        </div>
                                        <div class="col-md-5">
                                            <input type="number" class="form-control line-item-amount"
                                                   name="line_items[{{ $index }}][amount]"
                                                   placeholder="0.00" step="0.01" min="0"
                                                   value="{{ old('line_items.' . $index . '.amount', $item->amount) }}">
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-sm btn-outline-danger remove-item-btn"
                                                    data-item-id="{{ $item->id }}">
                                                <i class="bi bi-trash"></i> Remove
                                            </button>
                                        </div>
                                    </div>
                                    <input type="hidden" name="line_items[{{ $index }}][notes]"
                                           value="{{ $item->notes }}">
                                </div>
                            @endforeach
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-primary" id="addAdditionBtn">
                            <i class="bi bi-plus"></i> Add Earning
                        </button>
                    </div>
                </div>

                <!-- Deductions -->
                @php
                    $deductionItems = $payroll->lineItems->where('type.type', 'deduction');
                    $itemIndex = count($additionItems);
                @endphp
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Deductions</h5>
                    </div>
                    <div class="card-body">
                        <div id="deductionsContainer">
                            @foreach($deductionItems as $item)
                                <div class="line-item mb-3" data-type="deduction">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <label class="form-label small">{{ $item->type->name }}</label>
                                            <input type="hidden" name="line_items[{{ $itemIndex }}][id]" value="{{ $item->id }}">
                                            <input type="hidden" name="line_items[{{ $itemIndex }}][type_id]" value="{{ $item->type_id }}">
                                            <div class="text-muted small">{{ $item->type->description }}</div>
                                        </div>
                                        <div class="col-md-5">
                                            <input type="number" class="form-control line-item-amount"
                                                   name="line_items[{{ $itemIndex }}][amount]"
                                                   placeholder="0.00" step="0.01" min="0"
                                                   value="{{ old('line_items.' . $itemIndex . '.amount', $item->amount) }}">
                                        </div>
                                        <div class="col-md-2">
                                            @if(!$item->type->is_statutory)
                                                <button type="button" class="btn btn-sm btn-outline-danger remove-item-btn"
                                                        data-item-id="{{ $item->id }}">
                                                    <i class="bi bi-trash"></i> Remove
                                                </button>
                                            @endif
                                        </div>
                                    </div>
                                    <input type="hidden" name="line_items[{{ $itemIndex }}][notes]"
                                           value="{{ $item->notes }}">
                                </div>
                                @php $itemIndex++; @endphp
                            @endforeach
                        </div>
                        <div class="alert alert-info small mt-3">
                            <i class="bi bi-info-circle"></i> <strong>Note:</strong> Statutory deductions (EPF, SOCSO, EIS, Income Tax) are automatically calculated and cannot be removed.
                        </div>
                    </div>
                </div>

                <!-- Notes -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Notes</h5>
                    </div>
                    <div class="card-body">
                        <textarea class="form-control @error('notes') is-invalid @enderror"
                                  name="notes" rows="3"
                                  placeholder="Any additional notes about this payroll...">{{ old('notes', $payroll->notes) }}</textarea>
                        @error('notes')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Right Column - Payroll Summary -->
            <div class="col-lg-4">
                <!-- Employee Info -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="card-title mb-0">Employee Information</h6>
                    </div>
                    <div class="card-body">
                        <div class="row mb-2">
                            <div class="col-6">Employee ID:</div>
                            <div class="col-6 text-end">{{ $payroll->employee->employee_id }}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-6">Department:</div>
                            <div class="col-6 text-end">{{ $payroll->employee->department }}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-6">Position:</div>
                            <div class="col-6 text-end">{{ $payroll->employee->position }}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-6">Status:</div>
                            <div class="col-6 text-end">
                                @if($payroll->status === 'paid')
                                    <span class="badge bg-success">Paid</span>
                                @elseif($payroll->status === 'processed')
                                    <span class="badge bg-info">Processed</span>
                                @else
                                    <span class="badge bg-warning">Draft</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Pay Summary -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="card-title mb-0">Pay Summary</h6>
                    </div>
                    <div class="card-body">
                        <!-- Basic Pay -->
                        <div class="row mb-2">
                            <div class="col-7">Base Salary</div>
                            <div class="col-5 text-end">
                                <span id="basicPayDisplay">RM {{ number_format($payroll->base_salary, 2) }}</span>
                            </div>
                        </div>

                        <!-- Additional Earnings Display -->
                        <div id="additionalEarningsDisplay"></div>

                        <!-- Gross Pay -->
                        <hr>
                        <div class="row mb-2">
                            <div class="col-7"><strong>Gross Pay</strong></div>
                            <div class="col-5 text-end">
                                <strong id="grossPayDisplay">RM {{ number_format($payroll->gross_pay, 2) }}</strong>
                            </div>
                        </div>

                        <!-- Deductions Display -->
                        <div id="deductionsDisplay"></div>

                        <!-- Net Pay -->
                        <hr>
                        <div class="row mb-2">
                            <div class="col-7"><strong>Net Pay</strong></div>
                            <div class="col-5 text-end">
                                <strong id="netPayDisplay" class="text-success">RM {{ number_format($payroll->net_pay, 2) }}</strong>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="card">
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save"></i> Save Changes
                            </button>
                            <a href="{{ route('companies.hr.payroll.show', [$company, $payroll]) }}" class="btn btn-outline-secondary">
                                Cancel
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Hidden field for removed items -->
        <input type="hidden" name="removed_items" id="removedItems" value="">
    </form>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let lineItemCounter = {{ count($payroll->lineItems) }};
    let removedItems = [];

    const baseSalaryInput = document.getElementById('baseSalary');
    const workedMonthsInput = document.getElementById('workedMonths');

    // Remove item functionality
    document.querySelectorAll('.remove-item-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const itemId = this.dataset.itemId;
            if (itemId) {
                removedItems.push(itemId);
                document.getElementById('removedItems').value = removedItems.join(',');
            }
            this.closest('.line-item').remove();
            calculatePayroll();
        });
    });

    // Add addition button handler
    document.getElementById('addAdditionBtn').addEventListener('click', function() {
        // You can implement a modal here to select addition type
        // For now, let's add a simple input
        addLineItem('addition');
    });

    function addLineItem(type) {
        lineItemCounter++;

        const container = type === 'addition' ?
            document.getElementById('additionalEarnings') :
            document.getElementById('deductionsContainer');

        const div = document.createElement('div');
        div.className = 'line-item mb-3';
        div.dataset.type = type;
        div.innerHTML = `
            <div class="row">
                <div class="col-md-5">
                    <input type="text" class="form-control"
                           name="line_items[${lineItemCounter}][name]"
                           placeholder="Item name" required>
                </div>
                <div class="col-md-5">
                    <input type="number" class="form-control line-item-amount"
                           name="line_items[${lineItemCounter}][amount]"
                           placeholder="0.00" step="0.01" min="0" required>
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-sm btn-outline-danger"
                            onclick="this.closest('.line-item').remove(); calculatePayroll();">
                        <i class="bi bi-trash"></i> Remove
                    </button>
                </div>
            </div>
            <input type="hidden" name="line_items[${lineItemCounter}][type]" value="${type}">
        `;

        container.appendChild(div);

        // Add amount change listener
        div.querySelector('.line-item-amount').addEventListener('input', calculatePayroll);

        calculatePayroll();
    }

    function calculatePayroll() {
        const baseSalary = parseFloat(baseSalaryInput.value || 0);
        const workedMonths = parseFloat(workedMonthsInput.value || 1);

        // Calculate prorated base salary
        const actualBaseSalary = baseSalary * workedMonths;

        // Calculate additional earnings
        let totalAdditions = 0;
        document.querySelectorAll('.line-item[data-type="addition"] .line-item-amount').forEach(input => {
            totalAdditions += parseFloat(input.value || 0);
        });

        // Calculate deductions
        let totalDeductions = 0;
        document.querySelectorAll('.line-item[data-type="deduction"] .line-item-amount').forEach(input => {
            totalDeductions += parseFloat(input.value || 0);
        });

        const grossPay = actualBaseSalary + totalAdditions;
        const netPay = grossPay - totalDeductions;

        // Update displays
        document.getElementById('basicPayDisplay').textContent = formatCurrency(actualBaseSalary);
        document.getElementById('grossPayDisplay').textContent = formatCurrency(grossPay);
        document.getElementById('netPayDisplay').textContent = formatCurrency(netPay);

        // Update additional earnings display
        const additionsDisplay = document.getElementById('additionalEarningsDisplay');
        if (totalAdditions > 0) {
            additionsDisplay.innerHTML = `
                <div class="text-muted small mb-1">Additional earnings</div>
                <div class="row mb-1">
                    <div class="col-7">Total Additions</div>
                    <div class="col-5 text-end">${formatCurrency(totalAdditions)}</div>
                </div>
            `;
        } else {
            additionsDisplay.innerHTML = '';
        }

        // Update deductions display
        const deductionsDisplay = document.getElementById('deductionsDisplay');
        if (totalDeductions > 0) {
            deductionsDisplay.innerHTML = `
                <div class="text-muted small mb-1">Deductions</div>
                <div class="row mb-1">
                    <div class="col-7">Total Deductions</div>
                    <div class="col-5 text-end">${formatCurrency(totalDeductions)}</div>
                </div>
            `;
        } else {
            deductionsDisplay.innerHTML = '';
        }
    }

    function formatCurrency(amount) {
        return 'RM ' + parseFloat(amount || 0).toLocaleString('en-MY', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

    // Add event listeners for real-time calculation
    baseSalaryInput.addEventListener('input', calculatePayroll);
    workedMonthsInput.addEventListener('input', calculatePayroll);

    // Add listeners to all existing amount inputs
    document.querySelectorAll('.line-item-amount').forEach(input => {
        input.addEventListener('input', calculatePayroll);
    });

    // Initial calculation
    calculatePayroll();
});
</script>
@endpush
@endsection