@extends('garage.layouts.app')

@section('title', 'Employee Responsibilities')

@section('content')
@include('garage.hr.styles')
<div class="container-fluid px-3 py-3 hrx-page">
    <div class="d-flex align-items-center justify-content-between mb-3">
        <div>
            <div class="h4 mb-0"><i class="bi bi-person-workspace me-2 text-primary"></i>Employee Responsibilities</div>
            <div class="text-muted small">Assign services/responsibilities to employees by department and designation context.</div>
        </div>
        <div class="d-flex gap-2 hrx-actions-bar">
            <a href="{{ route('garage.services.index') }}" class="btn btn-sm btn-outline-secondary">Services</a>
            <a href="{{ route('garage.employees.index') }}" class="btn btn-sm btn-outline-secondary">Employees</a>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success py-2 small">{{ session('success') }}</div>
    @endif
    @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="get" class="card hrx-card mb-3 hrx-filter">
        <div class="card-body py-2">
            <div class="row g-2 align-items-center">
                <div class="col-md-4">
                    <input name="search" value="{{ $search }}" class="form-control form-control-sm" placeholder="Search employee / department / designation…">
                </div>
                <div class="col-md-2">
                    <button class="btn btn-sm btn-outline-primary">Search</button>
                </div>
            </div>
        </div>
    </form>

    <div class="card hrx-card">
        <div class="table-responsive">
            <table class="table table-sm mb-0 align-middle">
                <thead class="table-light">
                <tr>
                    <th>Employee</th>
                    <th>Department</th>
                    <th>Designation</th>
                    <th>Responsibilities (services)</th>
                    <th class="text-end" style="width: 140px;">Actions</th>
                </tr>
                </thead>
                <tbody>
                @forelse($rows as $r)
                    <tr>
                        <td>
                            <div class="fw-semibold">{{ $r->name }}</div>
                            <div class="small text-muted">{{ $r->code ?: 'No code' }}</div>
                        </td>
                        <td>{{ $r->department_name ?: '—' }}</td>
                        <td>{{ $r->designation_name ?: '—' }}</td>
                        <td>
                            <div class="small">
                                <span class="badge bg-primary-subtle text-primary border border-primary-subtle">{{ (int) $r->service_count }}</span>
                                @if(!empty($r->service_names))
                                    <span class="text-muted ms-1">{{ \Illuminate\Support\Str::limit($r->service_names, 120) }}</span>
                                @endif
                            </div>
                        </td>
                        <td class="text-end">
                            <button
                                type="button"
                                class="btn btn-sm btn-outline-primary"
                                data-bs-toggle="modal"
                                data-bs-target="#responsibilityModal"
                                data-employee-id="{{ $r->id }}"
                                data-employee-name="{{ e($r->name) }}"
                                data-department-id="{{ (int) ($r->garage_department_id ?? 0) }}"
                                data-designation-id="{{ (int) ($r->garage_designation_id ?? 0) }}"
                            >Assign</button>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="text-muted p-3">No employees found.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if(method_exists($rows,'links'))
            <div class="card-body py-2">{{ $rows->links() }}</div>
        @endif
    </div>
</div>

<div class="modal fade" id="responsibilityModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <form method="post" action="{{ route('garage.employee-responsibilities.save') }}" id="responsibilityForm">
                @csrf
                <input type="hidden" name="garage_employee_id" id="respEmployeeId">
                <div class="modal-header">
                    <div>
                        <div class="fw-semibold">Assign services</div>
                        <div class="text-muted small" id="respEmployeeName">Employee</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="small text-muted mb-2" id="respRuleHint">Showing services by rule…</div>
                    <div class="row g-2">
                        @foreach(($services ?? []) as $s)
                            <div class="col-md-6 resp-col" data-service-name="{{ strtolower($s->name) }}">
                                <label class="form-check border rounded p-2 d-flex align-items-center justify-content-between">
                                    <span>
                                        <input class="form-check-input me-2 resp-service" type="checkbox" name="garage_service_ids[]" value="{{ $s->id }}">
                                        <span class="fw-semibold">{{ $s->name }}</span>
                                    </span>
                                    <span class="small text-muted">PKR {{ number_format((float) ($s->price ?? 0), 0) }}</span>
                                </label>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary">Save responsibilities</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    (function () {
        var assigned = @json($assigned ?? []);
        var rules = @json(($rules ?? collect())->values());
        var modal = document.getElementById('responsibilityModal');
        if (!modal) return;

        modal.addEventListener('show.bs.modal', function (ev) {
            var btn = ev.relatedTarget;
            if (!btn) return;
            var employeeId = String(btn.getAttribute('data-employee-id') || '');
            var employeeName = String(btn.getAttribute('data-employee-name') || 'Employee');
            var depId = Number(btn.getAttribute('data-department-id') || 0);
            var desId = Number(btn.getAttribute('data-designation-id') || 0);

            document.getElementById('respEmployeeId').value = employeeId;
            document.getElementById('respEmployeeName').textContent = employeeName;

            var selected = Array.isArray(assigned[employeeId]) ? assigned[employeeId].map(function (x) { return Number(x); }) : [];
            var allowed = new Set((rules || []).filter(function (r) {
                var rDep = Number(r.garage_department_id || 0);
                var 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('.resp-service').forEach(function (el) {
                var sid = Number(el.value || 0);
                var show = allowed.has(sid);
                var col = el.closest('.resp-col');
                if (col) col.classList.toggle('d-none', !show);
                el.checked = show && selected.indexOf(sid) >= 0;
            });

            var hint = document.getElementById('respRuleHint');
            if (hint) {
                if (depId <= 0) hint.textContent = 'Employee has no department. Set department/designation in employee profile first.';
                else if (allowed.size === 0) hint.textContent = 'No responsibility rules found for this employee department/designation.';
                else hint.textContent = 'Showing only services allowed by rules.';
            }
        });
    })();
</script>
@endpush
@endsection