@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">Payment addition/deduction</h1>
            <p class="text-muted mb-0">Manage payroll addition and deduction types for {{ $company->name }}</p>
        </div>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newAdditionModal">
            <i class="bi bi-plus-circle me-1"></i> New additional pay
        </button>
    </div>

    <!-- Navigation Tabs -->
    <ul class="nav nav-tabs mb-4" id="payrollTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="additions-tab" data-bs-toggle="tab" data-bs-target="#additions" type="button" role="tab">
                Additions
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="deductions-tab" data-bs-toggle="tab" data-bs-target="#deductions" type="button" role="tab">
                Deductions
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="overtime-tab" data-bs-toggle="tab" data-bs-target="#overtime" type="button" role="tab">
                Overtime
            </button>
        </li>
    </ul>

    <div class="tab-content" id="payrollTabContent">
        <!-- Additions Tab -->
        <div class="tab-pane fade show active" id="additions" role="tabpanel">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="showDisabledAdditions">
                        <label class="form-check-label text-primary" for="showDisabledAdditions">
                            Show disabled
                        </label>
                    </div>
                    <div>
                        <button class="btn btn-outline-primary btn-sm me-2">
                            <i class="bi bi-upload me-1"></i> Import Additions
                        </button>
                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#newAdditionModal">
                            <i class="bi bi-plus-circle me-1"></i> New additional pay
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th width="5%">
                                        <button class="btn btn-sm btn-outline-secondary">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                    </th>
                                    <th>Name</th>
                                    <th width="8%">EPF</th>
                                    <th width="8%">SOCSO</th>
                                    <th width="8%">EIS</th>
                                    <th width="8%">Tax</th>
                                    <th width="8%">HRDF</th>
                                    <th width="8%">Fixed</th>
                                    <th width="15%">Assigned to</th>
                                    <th width="10%">Default amount</th>
                                    <th width="8%">E/EA fields</th>
                                    <th width="8%">Enabled</th>
                                    <th width="5%">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse(($types['addition'] ?? []) as $type)
                                <tr class="{{ !$type->enabled ? 'table-secondary' : '' }}">
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editTypeModal-{{ $type->id }}">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                    </td>
                                    <td>{{ $type->name }}</td>
                                    <td class="text-center">
                                        @if($type->affects_epf)
                                            <i class="bi bi-check-lg text-success"></i>
                                        @else
                                            <i class="bi bi-x-lg text-danger"></i>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($type->affects_socso)
                                            <i class="bi bi-check-lg text-success"></i>
                                        @else
                                            <i class="bi bi-x-lg text-danger"></i>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($type->affects_eis)
                                            <i class="bi bi-check-lg text-success"></i>
                                        @else
                                            <i class="bi bi-x-lg text-danger"></i>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($type->affects_tax)
                                            <i class="bi bi-check-lg text-success"></i>
                                        @else
                                            <i class="bi bi-x-lg text-danger"></i>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($type->affects_hrdf)
                                            <i class="bi bi-check-lg text-success"></i>
                                        @else
                                            <i class="bi bi-x-lg text-danger"></i>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($type->is_fixed)
                                            <i class="bi bi-check-lg text-success"></i>
                                        @else
                                            <i class="bi bi-x-lg text-danger"></i>
                                        @endif
                                    </td>
                                    <td>{{ $type->assigned_to }}</td>
                                    <td>{{ $type->default_amount > 0 ? number_format($type->default_amount, 2) : '0' }}</td>
                                    <td>{{ $type->ea_fields ?: 'None' }}</td>
                                    <td class="text-center">
                                        @if($type->enabled)
                                            <i class="bi bi-check-lg text-success"></i>
                                        @else
                                            <i class="bi bi-x-lg text-danger"></i>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                                                <i class="bi bi-three-dots"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <form method="POST" action="{{ route('companies.hr.payroll.addition-deduction-types.toggle', [$company, $type]) }}" class="d-inline">
                                                        @csrf
                                                        @method('PATCH')
                                                        <button type="submit" class="dropdown-item">
                                                            {{ $type->enabled ? 'Disable' : 'Enable' }}
                                                        </button>
                                                    </form>
                                                </li>
                                                @if($type->category === 'custom')
                                                <li>
                                                    <form method="POST" action="{{ route('companies.hr.payroll.addition-deduction-types.destroy', [$company, $type]) }}" 
                                                          class="d-inline" onsubmit="return confirm('Are you sure you want to delete this type?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="dropdown-item text-danger">Delete</button>
                                                    </form>
                                                </li>
                                                @endif
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="13" class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="bi bi-plus-circle" style="font-size: 2rem;"></i>
                                            <p class="mt-2 mb-0">No addition types found</p>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-6">
                            <button class="btn btn-outline-danger btn-sm">
                                <i class="bi bi-arrow-clockwise me-1"></i> Reset
                            </button>
                        </div>
                        <div class="col-6 text-end">
                            <button class="btn btn-primary btn-sm">
                                <i class="bi bi-check-lg me-1"></i> Save
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Deductions Tab -->
        <div class="tab-pane fade" id="deductions" role="tabpanel">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="showDisabledDeductions">
                        <label class="form-check-label text-primary" for="showDisabledDeductions">
                            Show disabled
                        </label>
                    </div>
                    <div>
                        <button class="btn btn-outline-primary btn-sm me-2">
                            <i class="bi bi-upload me-1"></i> Import Deductions
                        </button>
                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#newDeductionModal">
                            <i class="bi bi-plus-circle me-1"></i> New deduction type
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th width="5%">
                                        <button class="btn btn-sm btn-outline-secondary">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                    </th>
                                    <th>Name</th>
                                    <th width="8%">EPF</th>
                                    <th width="8%">SOCSO</th>
                                    <th width="8%">EIS</th>
                                    <th width="8%">Tax</th>
                                    <th width="8%">HRDF</th>
                                    <th width="8%">Fixed</th>
                                    <th width="15%">Assigned to</th>
                                    <th width="10%">Default amount</th>
                                    <th width="8%">E/EA fields</th>
                                    <th width="8%">Enabled</th>
                                    <th width="5%">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse(($types['deduction'] ?? []) as $type)
                                <tr class="{{ !$type->enabled ? 'table-secondary' : '' }}">
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editTypeModal-{{ $type->id }}">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                    </td>
                                    <td>
                                        {{ $type->name }}
                                        @if($type->category === 'statutory')
                                            <span class="badge bg-info ms-1">Statutory</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($type->affects_epf)
                                            <i class="bi bi-check-lg text-success"></i>
                                        @else
                                            <i class="bi bi-x-lg text-danger"></i>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($type->affects_socso)
                                            <i class="bi bi-check-lg text-success"></i>
                                        @else
                                            <i class="bi bi-x-lg text-danger"></i>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($type->affects_eis)
                                            <i class="bi bi-check-lg text-success"></i>
                                        @else
                                            <i class="bi bi-x-lg text-danger"></i>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($type->affects_tax)
                                            <i class="bi bi-check-lg text-success"></i>
                                        @else
                                            <i class="bi bi-x-lg text-danger"></i>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($type->affects_hrdf)
                                            <i class="bi bi-check-lg text-success"></i>
                                        @else
                                            <i class="bi bi-x-lg text-danger"></i>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($type->is_fixed)
                                            <i class="bi bi-check-lg text-success"></i>
                                        @else
                                            <i class="bi bi-x-lg text-danger"></i>
                                        @endif
                                    </td>
                                    <td>{{ $type->assigned_to }}</td>
                                    <td>{{ $type->default_amount > 0 ? number_format($type->default_amount, 2) : '0' }}</td>
                                    <td>{{ $type->ea_fields ?: 'None' }}</td>
                                    <td class="text-center">
                                        @if($type->enabled)
                                            <i class="bi bi-check-lg text-success"></i>
                                        @else
                                            <i class="bi bi-x-lg text-danger"></i>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                                                <i class="bi bi-three-dots"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <form method="POST" action="{{ route('companies.hr.payroll.addition-deduction-types.toggle', [$company, $type]) }}" class="d-inline">
                                                        @csrf
                                                        @method('PATCH')
                                                        <button type="submit" class="dropdown-item">
                                                            {{ $type->enabled ? 'Disable' : 'Enable' }}
                                                        </button>
                                                    </form>
                                                </li>
                                                @if($type->category === 'custom')
                                                <li>
                                                    <form method="POST" action="{{ route('companies.hr.payroll.addition-deduction-types.destroy', [$company, $type]) }}" 
                                                          class="d-inline" onsubmit="return confirm('Are you sure you want to delete this type?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="dropdown-item text-danger">Delete</button>
                                                    </form>
                                                </li>
                                                @endif
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="13" class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="bi bi-dash-circle" style="font-size: 2rem;"></i>
                                            <p class="mt-2 mb-0">No deduction types found</p>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-6">
                            <button class="btn btn-outline-danger btn-sm">
                                <i class="bi bi-arrow-clockwise me-1"></i> Reset
                            </button>
                        </div>
                        <div class="col-6 text-end">
                            <button class="btn btn-primary btn-sm">
                                <i class="bi bi-check-lg me-1"></i> Save
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Overtime Tab -->
        <div class="tab-pane fade" id="overtime" role="tabpanel">
            <div class="card">
                <div class="card-body text-center py-5">
                    <i class="bi bi-clock text-muted" style="font-size: 4rem;"></i>
                    <h5 class="mt-3">Overtime Configuration</h5>
                    <p class="text-muted">Configure overtime rates and rules here</p>
                    <button class="btn btn-primary">Configure Overtime</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- New Addition Modal -->
<div class="modal fade" id="newAdditionModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="POST" action="{{ route('companies.hr.payroll.addition-deduction-types.store', $company) }}">
                @csrf
                <input type="hidden" name="type" value="addition">
                <div class="modal-header">
                    <h5 class="modal-title">New Additional Pay</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Category <span class="text-danger">*</span></label>
                            <select class="form-select" name="category" required>
                                <option value="custom">Custom</option>
                                <option value="statutory">Statutory</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Assigned to</label>
                            <input type="text" class="form-control" name="assigned_to" value="Everyone">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Default Amount</label>
                            <input type="number" class="form-control" name="default_amount" step="0.01" min="0">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">E/EA Fields</label>
                            <select class="form-select" name="ea_fields">
                                <option value="">None</option>
                                <option value="BTC">BTC</option>
                                <option value="F">F</option>
                                <option value="B1B">B1B</option>
                                <option value="B1E">B1E</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_fixed" value="1">
                                <label class="form-check-label">Fixed Amount</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 mb-3">
                            <label class="form-label">Tax Implications</label>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="affects_epf" value="1">
                                        <label class="form-check-label">Affects EPF</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="affects_socso" value="1">
                                        <label class="form-check-label">Affects SOCSO</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="affects_eis" value="1">
                                        <label class="form-check-label">Affects EIS</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="affects_tax" value="1">
                                        <label class="form-check-label">Affects Tax</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create Addition</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- New Deduction Modal -->
<div class="modal fade" id="newDeductionModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="POST" action="{{ route('companies.hr.payroll.addition-deduction-types.store', $company) }}">
                @csrf
                <input type="hidden" name="type" value="deduction">
                <div class="modal-header">
                    <h5 class="modal-title">New Deduction Type</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Category <span class="text-danger">*</span></label>
                            <select class="form-select" name="category" required>
                                <option value="custom">Custom</option>
                                <option value="statutory">Statutory</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Assigned to</label>
                            <input type="text" class="form-control" name="assigned_to" value="Everyone">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Default Amount</label>
                            <input type="number" class="form-control" name="default_amount" step="0.01" min="0">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">E/EA Fields</label>
                            <select class="form-select" name="ea_fields">
                                <option value="">None</option>
                                <option value="BTC">BTC</option>
                                <option value="F">F</option>
                                <option value="B1B">B1B</option>
                                <option value="B1E">B1E</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_fixed" value="1">
                                <label class="form-check-label">Fixed Amount</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 mb-3">
                            <label class="form-label">Tax Implications</label>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="affects_epf" value="1">
                                        <label class="form-check-label">Affects EPF</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="affects_socso" value="1">
                                        <label class="form-check-label">Affects SOCSO</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="affects_eis" value="1">
                                        <label class="form-check-label">Affects EIS</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="affects_tax" value="1">
                                        <label class="form-check-label">Affects Tax</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create Deduction</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Show/hide disabled items
    document.getElementById('showDisabledAdditions').addEventListener('change', function() {
        const rows = document.querySelectorAll('#additions tbody tr.table-secondary');
        rows.forEach(row => {
            row.style.display = this.checked ? '' : 'none';
        });
    });

    document.getElementById('showDisabledDeductions').addEventListener('change', function() {
        const rows = document.querySelectorAll('#deductions tbody tr.table-secondary');
        rows.forEach(row => {
            row.style.display = this.checked ? '' : 'none';
        });
    });

    // Hide disabled items by default
    document.querySelectorAll('.table-secondary').forEach(row => {
        row.style.display = 'none';
    });
});
</script>
@endsection