@extends('garage.layouts.app')

@section('title', 'Add employee')

@section('content')
<div class="container-fluid px-0 py-0 w-100">
    <div class="d-flex align-items-center justify-content-between mb-3">
        <div>
            <div class="h4 mb-0"><i class="bi bi-person-plus me-2 text-primary"></i>New employee</div>
            <div class="text-muted small">Tip: Hourly/Daily employees can auto-create a billable labor item.</div>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('garage.employee-categories.index') }}" class="btn btn-sm btn-outline-primary"><i class="bi bi-diagram-3 me-1"></i>Categories</a>
            <a href="{{ route('garage.employees.index') }}" class="btn btn-sm btn-outline-secondary">Back</a>
        </div>
    </div>

    @if(session('error'))
        <div class="alert alert-danger py-2 small">{{ session('error') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger py-2 small">
            <ul class="mb-0 ps-3">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    <form method="POST" action="{{ route('garage.employees.store') }}" class="card border-0 shadow-sm" enctype="multipart/form-data">
        @csrf
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label small text-muted">Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" value="{{ old('name') }}" class="form-control" placeholder="Enter employee full name" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label small text-muted">Code (optional)</label>
                    <input type="text" name="code" value="{{ old('code') }}" class="form-control" placeholder="EMP-001">
                </div>
                <div class="col-md-3">
                    <label class="form-label small text-muted d-flex justify-content-between align-items-center">
                        <span>Category</span>
                        <a class="small text-decoration-none" href="{{ route('garage.employee-categories.index') }}">Manage</a>
                    </label>
                    <select name="garage_labor_category_id" class="form-select">
                        <option value="">— Select —</option>
                        @foreach($categories as $c)
                            <option value="{{ $c->id }}" @selected(old('garage_labor_category_id')==$c->id)>{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label small text-muted d-flex justify-content-between align-items-center">
                        <span>Department</span>
                        <a class="small text-decoration-none" href="{{ route('garage.departments.index') }}">Manage</a>
                    </label>
                    <select name="garage_department_id" class="form-select" id="garage_department_id">
                        <option value="">— Select —</option>
                        @foreach(($departments ?? []) as $d)
                            <option value="{{ $d->id }}" @selected(old('garage_department_id')==$d->id)>{{ $d->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label small text-muted d-flex justify-content-between align-items-center">
                        <span>Designation</span>
                        <a class="small text-decoration-none" href="{{ route('garage.designations.index') }}">Manage</a>
                    </label>
                    <select name="garage_designation_id" class="form-select" id="garage_designation_id">
                        <option value="">— Select —</option>
                        @foreach(($designations ?? []) as $des)
                            <option value="{{ $des->id }}" data-department-id="{{ $des->garage_department_id }}" @selected(old('garage_designation_id')==$des->id)>{{ $des->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-12">
                    <label class="form-label small text-muted d-flex justify-content-between align-items-center">
                        <span>Services / Responsibilities</span>
                        <a class="small text-decoration-none" href="{{ route('garage.employee-responsibility-rules.index') }}">Setup rules</a>
                    </label>
                    <div class="border rounded p-2" style="max-height: 170px; overflow:auto;">
                        <div class="row g-2">
                            @forelse(($responsibilityServices ?? []) as $svc)
                                <div class="col-md-4 responsibility-col" data-service-name="{{ strtolower($svc->name) }}">
                                    <label class="form-check small mb-0">
                                        <input class="form-check-input" type="checkbox" name="responsibility_service_ids[]" value="{{ $svc->id }}" @checked(in_array((int)$svc->id, array_map('intval', (array) old('responsibility_service_ids', [])), true))>
                                        <span class="form-check-label">{{ $svc->name }}</span>
                                    </label>
                                </div>
                            @empty
                                <div class="col-12"><span class="small text-muted">No active services found.</span></div>
                            @endforelse
                        </div>
                    </div>
                    <div class="small text-muted mt-1" id="responsibilityRuleHint">Select department/designation to see allowed services.</div>
                </div>

                <div class="col-md-4">
                    <label class="form-label small text-muted">Phone <span class="text-danger">*</span></label>
                    <input type="text" id="employeePhoneInput" name="phone" value="{{ old('phone') }}" class="form-control" placeholder="Enter phone number" required>
                    <div id="employeePhoneWarning" class="small text-danger mt-1 d-none">
                        This phone number already exists for another employee.
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="form-label small text-muted">Email</label>
                    <input type="email" name="email" value="{{ old('email') }}" class="form-control">
                </div>
                <div class="col-md-4">
                    <label class="form-label small text-muted">CNIC</label>
                    <input type="text" name="cnic" value="{{ old('cnic') }}" class="form-control" placeholder="xxxxx-xxxxxxx-x">
                </div>

                <div class="col-md-4">
                    <label class="form-label small text-muted">Join date</label>
                    <input type="date" name="join_date" value="{{ old('join_date') }}" class="form-control">
                </div>
                <div class="col-md-4">
                    <label class="form-label small text-muted">Working hours / day</label>
                    <input type="number" step="0.25" min="0" max="24" name="working_hours_per_day" value="{{ old('working_hours_per_day') }}" class="form-control" placeholder="e.g. 8">
                </div>
                <div class="col-md-4">
                    <label class="form-label small text-muted">Salary type <span class="text-danger">*</span></label>
                    <select name="salary_type" class="form-select" required>
                        @php($st = old('salary_type','monthly'))
                        <option value="monthly" @selected($st==='monthly')>Monthly</option>
                        <option value="hourly" @selected($st==='hourly')>Hourly</option>
                        <option value="daily" @selected($st==='daily')>Daily</option>
                        <option value="fixed" @selected($st==='fixed')>Fixed</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label small text-muted">Salary amount <span class="text-danger">*</span></label>
                    <input type="number" step="0.01" min="0" name="salary_amount" value="{{ old('salary_amount',0) }}" class="form-control" placeholder="Enter salary amount" required id="salaryAmountInput">
                </div>
                <div class="col-md-8">
                    <label class="form-label small text-muted">Total salary with fixed allowances</label>
                    <div class="form-control bg-light" id="salaryWithFixedPreview">0.00</div>
                    <div class="small text-muted mt-1">Formula: Basic salary + active fixed allowances.</div>
                </div>
                <div class="col-md-4">
                    <label class="form-label small text-muted">Employee fund deduction</label>
                    <input type="number" step="0.01" min="0" name="employee_fund_amount" value="{{ old('employee_fund_amount', 0) }}" class="form-control" id="employeeFundAmountInput">
                    <div class="small text-muted mt-1">Auto-filled from Employee Fund Setup slab (editable).</div>
                </div>

                <div class="col-md-12">
                    <label class="form-label small text-muted">Address</label>
                    <textarea name="address" class="form-control" rows="2" placeholder="Enter employee address">{{ old('address') }}</textarea>
                </div>
                <div class="col-md-12">
                    <label class="form-label small text-muted">Notes</label>
                    <textarea name="notes" class="form-control" rows="2" placeholder="Add skills, shift details, or remarks">{{ old('notes') }}</textarea>
                </div>
                <div class="col-md-6">
                    <label class="form-label small text-muted">Employee image</label>
                    <input type="file" name="employee_image" class="form-control" accept=".jpg,.jpeg,.png,.webp,image/*">
                    <div class="small text-muted mt-1">Allowed: JPG, PNG, WEBP (max 5 MB).</div>
                </div>
                <div class="col-md-6">
                    <label class="form-label small text-muted">Employee documents (multiple)</label>
                    <input type="file" name="employee_documents[]" class="form-control" multiple accept=".jpg,.jpeg,.png,.webp,.pdf,.doc,.docx,.xls,.xlsx,.txt">
                    <div class="small text-muted mt-1">Allowed: images, PDF, DOC/DOCX, XLS/XLSX, TXT (max 10 MB each).</div>
                </div>

                <div class="col-12" id="allowances-section">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <label class="form-label small text-muted mb-0">Allowances</label>
                        <a class="small text-decoration-none" href="{{ route('garage.employee-allowances.index') }}">Manage allowances setup</a>
                        <button class="btn btn-sm btn-outline-primary" type="button" id="addAllowanceRow">
                            <i class="bi bi-plus-lg me-1"></i>Add allowance
                        </button>
                    </div>
                    <div class="table-responsive border rounded">
                        <table class="table table-sm mb-0 align-middle" id="allowanceTable">
                            <thead class="table-light">
                            <tr>
                                <th style="min-width: 240px;">Allowance</th>
                                <th style="min-width: 120px;">Type</th>
                                <th style="min-width: 130px;">Amount</th>
                                <th style="min-width: 130px;">Month (variable)</th>
                                <th class="text-center" style="width: 90px;">Active</th>
                                <th style="width: 70px;"></th>
                            </tr>
                            </thead>
                            <tbody id="allowanceRows">
                                @foreach(($allowanceSeedRows ?? []) as $i => $r)
                                    <tr>
                                        <td>
                                            <select class="form-select form-select-sm allowance-def" name="allowance_definition_id[{{ $i }}]">
                                                <option value="">Select allowance</option>
                                                @foreach(($allowanceDefinitions ?? []) as $def)
                                                    <option value="{{ $def->id }}"
                                                        data-type="{{ $def->allowance_type }}"
                                                        data-default-amount="{{ (float) ($def->default_amount ?? 0) }}"
                                                        {{ (int)($r['definition_id'] ?? 0) === (int)$def->id ? 'selected' : '' }}>
                                                        {{ $def->name }} ({{ ucfirst($def->allowance_type) }})
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td><span class="badge allowance-type-badge {{ (($r['type'] ?? 'fixed') === 'variable') ? 'bg-warning-subtle text-warning border border-warning-subtle' : 'bg-primary-subtle text-primary border border-primary-subtle' }}">{{ ucfirst($r['type'] ?? 'fixed') }}</span></td>
                                        <td><input type="number" min="0" step="0.01" class="form-control form-control-sm allowance-amount" name="allowance_amount[{{ $i }}]" value="{{ $r['amount'] ?? '' }}"></td>
                                        <td><input type="month" class="form-control form-control-sm allowance-month" name="allowance_apply_month[{{ $i }}]" value="{{ $r['month'] ?? '' }}" {{ (($r['type'] ?? 'fixed') === 'variable') ? '' : 'disabled' }}></td>
                                        <td class="text-center"><input class="form-check-input" type="checkbox" name="allowance_active[{{ $i }}]" value="1" {{ !empty($r['active']) ? 'checked' : '' }}></td>
                                        <td class="text-end"><button class="btn btn-sm btn-outline-danger remove-row" type="button"><i class="bi bi-x"></i></button></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="small text-muted mt-1">
                        Fixed allowances are added every month. Variable allowances are added only in selected month.
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="form-check">
                        @if(old('is_active', 1))
                            <input class="form-check-input" type="checkbox" value="1" id="is_active" name="is_active" checked>
                        @else
                            <input class="form-check-input" type="checkbox" value="1" id="is_active" name="is_active">
                        @endif
                        <label class="form-check-label" for="is_active">Active</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer bg-white border-0 d-flex justify-content-end gap-2">
            <a href="{{ route('garage.employees.index') }}" class="btn btn-outline-secondary">Cancel</a>
            <button type="submit" class="btn btn-primary"><i class="bi bi-check2-circle me-1"></i>Save employee</button>
        </div>
    </form>
</div>
<script>
    (function () {
        const existingPhones = @json(($existingPhones ?? collect())->values());
        function normalizePhone(v) {
            const raw = (v || '').toString().trim();
            if (!raw) return '';
            const hasPlus = raw.startsWith('+');
            const digits = raw.replace(/\D+/g, '');
            if (!digits) return '';
            return hasPlus ? ('+' + digits) : digits;
        }
        const phoneInput = document.getElementById('employeePhoneInput');
        const phoneWarning = document.getElementById('employeePhoneWarning');
        if (phoneInput && phoneWarning) {
            const phoneSet = new Set((existingPhones || []).map(normalizePhone).filter(Boolean));
            const validatePhone = () => {
                const n = normalizePhone(phoneInput.value);
                const duplicate = n && phoneSet.has(n);
                phoneWarning.classList.toggle('d-none', !duplicate);
                phoneInput.classList.toggle('is-invalid', !!duplicate);
            };
            phoneInput.addEventListener('input', validatePhone);
            phoneInput.addEventListener('blur', validatePhone);
            validatePhone();
        }

        const departmentSelect = document.getElementById('garage_department_id');
        const designationSelect = document.getElementById('garage_designation_id');
        const responsibilityRuleRows = @json(($responsibilityRules ?? collect())->values());
        const responsibilityHint = document.getElementById('responsibilityRuleHint');
        function filterDesignationsByDepartment() {
            if (!departmentSelect || !designationSelect) return;
            const selectedDepartmentId = String(departmentSelect.value || '');
            const options = Array.from(designationSelect.options || []);
            options.forEach(function (opt, idx) {
                if (idx === 0) return;
                const depId = String(opt.getAttribute('data-department-id') || '');
                const show = !selectedDepartmentId || depId === selectedDepartmentId;
                opt.hidden = !show;
            });
            const current = designationSelect.options[designationSelect.selectedIndex];
            if (current && current.hidden) {
                designationSelect.value = '';
            }
        }
        if (departmentSelect && designationSelect) {
            departmentSelect.addEventListener('change', filterDesignationsByDepartment);
            filterDesignationsByDepartment();
        }

        function filterResponsibilityServicesByRule() {
            const depId = Number(departmentSelect?.value || 0);
            const desId = Number(designationSelect?.value || 0);
            const allowed = new Set((responsibilityRuleRows || []).filter(function (r) {
                const rDep = Number(r.garage_department_id || 0);
                const rDes = Number(r.garage_designation_id || 0);
                if (rDep !== depId || depId <= 0) return false;
                if (desId > 0) return rDes === 0 || rDes === desId;
                return rDes === 0;
            }).map(function (r) { return Number(r.garage_service_id || 0); }));

            document.querySelectorAll('input[name="responsibility_service_ids[]"]').forEach(function (cb) {
                const sid = Number(cb.value || 0);
                const col = cb.closest('.responsibility-col');
                const show = allowed.has(sid);
                col?.classList.toggle('d-none', !show);
                if (!show) cb.checked = false;
            });

            if (responsibilityHint) {
                if (depId <= 0) {
                    responsibilityHint.textContent = 'Select department/designation to see allowed services.';
                } else if (allowed.size === 0) {
                    responsibilityHint.textContent = 'No service rules found for selected department/designation.';
                } else {
                    responsibilityHint.textContent = 'Showing services allowed by responsibility rules.';
                }
            }
        }
        if (departmentSelect) departmentSelect.addEventListener('change', filterResponsibilityServicesByRule);
        if (designationSelect) designationSelect.addEventListener('change', filterResponsibilityServicesByRule);
        filterResponsibilityServicesByRule();

        const rowsContainer = document.getElementById('allowanceRows');
        const addBtn = document.getElementById('addAllowanceRow');
        const salaryInput = document.getElementById('salaryAmountInput');
        const employeeFundAmountInput = document.getElementById('employeeFundAmountInput');
        const salaryWithFixedPreview = document.getElementById('salaryWithFixedPreview');
        const employeeFundSlabs = @json(($employeeFundSlabs ?? collect())->values());
        if (!rowsContainer || !addBtn) return;

        let rowIndex = rowsContainer.querySelectorAll('tr').length;

        function rowTemplate(i, data) {
            const esc = (v) => (v ?? '').toString().replace(/"/g, '&quot;');
            const type = data.type || 'fixed';
            const checked = data.active ? 'checked' : '';
            const monthDisabled = type === 'variable' ? '' : 'disabled';
            const defs = @json(($allowanceDefinitions ?? collect())->values());
            const options = ['<option value="">Select allowance</option>'].concat(
                defs.map(function (d) {
                    const selected = Number(data.definition_id || 0) === Number(d.id) ? 'selected' : '';
                    return `<option value="${d.id}" data-type="${d.allowance_type}" data-default-amount="${Number(d.default_amount || 0)}" ${selected}>${d.name} (${(d.allowance_type || '').charAt(0).toUpperCase() + (d.allowance_type || '').slice(1)})</option>`;
                })
            ).join('');
            const badgeClass = type === 'variable'
                ? 'bg-warning-subtle text-warning border border-warning-subtle'
                : 'bg-primary-subtle text-primary border border-primary-subtle';
            return `
                <tr>
                    <td>
                        <select class="form-select form-select-sm allowance-def" name="allowance_definition_id[${i}]">${options}</select>
                    </td>
                    <td><span class="badge allowance-type-badge ${badgeClass}">${type === 'variable' ? 'Variable' : 'Fixed'}</span></td>
                    <td><input type="number" min="0" step="0.01" class="form-control form-control-sm allowance-amount" name="allowance_amount[${i}]" value="${esc(data.amount)}"></td>
                    <td><input type="month" class="form-control form-control-sm allowance-month" name="allowance_apply_month[${i}]" value="${esc(data.month)}" ${monthDisabled}></td>
                    <td class="text-center"><input class="form-check-input" type="checkbox" name="allowance_active[${i}]" value="1" ${checked}></td>
                    <td class="text-end"><button class="btn btn-sm btn-outline-danger remove-row" type="button"><i class="bi bi-x"></i></button></td>
                </tr>
            `;
        }

        function addRow(data = {}) {
            rowsContainer.insertAdjacentHTML('beforeend', rowTemplate(rowIndex++, {
                name: data.name || '',
                definition_id: data.definition_id || '',
                type: data.type || 'fixed',
                amount: data.amount || '',
                month: data.month || '',
                active: data.active !== false
            }));
            updateSalaryWithFixedPreview();
        }

        function toNumber(value) {
            const n = Number(value || 0);
            return Number.isFinite(n) ? n : 0;
        }

        function updateSalaryWithFixedPreview() {
            if (!salaryWithFixedPreview) return;

            const basic = toNumber(salaryInput ? salaryInput.value : 0);
            let fixed = 0;

            rowsContainer.querySelectorAll('tr').forEach(function (row) {
                const select = row.querySelector('.allowance-def');
                const amountInput = row.querySelector('.allowance-amount');
                const activeInput = row.querySelector('input[type="checkbox"][name^="allowance_active"]');
                if (!select || !amountInput) return;

                const selected = select.options[select.selectedIndex];
                const type = selected ? (selected.getAttribute('data-type') || 'fixed') : 'fixed';
                const isActive = !!(activeInput && activeInput.checked);
                if (type === 'fixed' && isActive) {
                    fixed += toNumber(amountInput.value);
                }
            });

            salaryWithFixedPreview.textContent = (basic + fixed).toFixed(2);
        }

        function updateEmployeeFundAmountFromSalary() {
            if (!employeeFundAmountInput) return;
            const salary = toNumber(salaryInput ? salaryInput.value : 0);
            let fundAmount = 0;
            (employeeFundSlabs || []).forEach(function (slab) {
                const min = toNumber(slab.min_salary);
                const hasMax = slab.max_salary !== null && slab.max_salary !== '';
                const max = toNumber(slab.max_salary);
                const inRange = salary >= min && (!hasMax || salary <= max);
                if (inRange) {
                    fundAmount = toNumber(slab.deduction_amount);
                }
            });
            employeeFundAmountInput.value = fundAmount.toFixed(2);
        }

        addBtn.addEventListener('click', () => addRow());
        if (salaryInput) {
            salaryInput.addEventListener('input', updateSalaryWithFixedPreview);
            salaryInput.addEventListener('input', updateEmployeeFundAmountFromSalary);
        }

        rowsContainer.addEventListener('click', function (e) {
            const btn = e.target.closest('.remove-row');
            if (!btn) return;
            btn.closest('tr')?.remove();
            updateSalaryWithFixedPreview();
        });

        rowsContainer.addEventListener('change', function (e) {
            if (!e.target.classList.contains('allowance-def')) return;
            const row = e.target.closest('tr');
            const selected = e.target.options[e.target.selectedIndex];
            const type = selected ? (selected.getAttribute('data-type') || 'fixed') : 'fixed';
            const defaultAmount = selected ? Number(selected.getAttribute('data-default-amount') || 0) : 0;
            const month = row?.querySelector('.allowance-month');
            const badge = row?.querySelector('.allowance-type-badge');
            const amount = row?.querySelector('.allowance-amount');
            if (badge) {
                badge.textContent = type === 'variable' ? 'Variable' : 'Fixed';
                badge.className = 'badge allowance-type-badge ' + (type === 'variable'
                    ? 'bg-warning-subtle text-warning border border-warning-subtle'
                    : 'bg-primary-subtle text-primary border border-primary-subtle');
            }
            if (amount && (!amount.value || Number(amount.value) <= 0) && defaultAmount > 0) {
                amount.value = defaultAmount.toFixed(2);
            }
            if (!month) return;
            if (type === 'variable') {
                month.disabled = false;
            } else {
                month.disabled = true;
                month.value = '';
            }
            updateSalaryWithFixedPreview();
        });
        rowsContainer.addEventListener('input', function (e) {
            if (e.target.classList.contains('allowance-amount')) {
                updateSalaryWithFixedPreview();
            }
        });
        rowsContainer.addEventListener('change', function (e) {
            if (e.target.matches('input[type="checkbox"][name^="allowance_active"]')) {
                updateSalaryWithFixedPreview();
            }
        });

        // Rows are pre-rendered server-side; JS only handles add/remove/toggle behavior.
        updateSalaryWithFixedPreview();
        updateEmployeeFundAmountFromSalary();
    })();
</script>
@endsection