@extends('garage.layouts.app')

@section('title', 'Responsibility Rules')

@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-diagram-3 me-2 text-primary"></i>Responsibility Master</div>
            <div class="text-muted small">Map services to department/designation. Employee responsibilities must follow these rules.</div>
        </div>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#ruleModal">
            <i class="bi bi-plus-lg me-1"></i>Add rule
        </button>
    </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

    <div class="card hrx-card">
        <div class="table-responsive">
            <table class="table table-sm mb-0 align-middle">
                <thead class="table-light">
                <tr>
                    <th>Service</th>
                    <th>Department</th>
                    <th>Designation</th>
                    <th>Status</th>
                    <th class="text-end" style="width:120px;">Actions</th>
                </tr>
                </thead>
                <tbody>
                @forelse($rules as $r)
                    <tr>
                        <td class="fw-semibold">{{ $r->service_name ?: '—' }}</td>
                        <td>{{ $r->department_name ?: '—' }}</td>
                        <td>{{ $r->designation_name ?: 'All in department' }}</td>
                        <td>
                            @if($r->is_active)
                                <span class="badge bg-success-subtle text-success border border-success-subtle">Active</span>
                            @else
                                <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">Inactive</span>
                            @endif
                        </td>
                        <td class="text-end">
                            <form method="post" action="{{ route('garage.employee-responsibility-rules.destroy', $r->id) }}" onsubmit="return confirm('Remove this rule?');">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger">Remove</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="text-muted p-3">No rules found.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if(method_exists($rules,'links'))
            <div class="card-body py-2">{{ $rules->links() }}</div>
        @endif
    </div>
</div>

<div class="modal fade" id="ruleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="post" action="{{ route('garage.employee-responsibility-rules.store') }}">
                @csrf
                <div class="modal-header">
                    <div>
                        <div class="fw-semibold">Add responsibility rule</div>
                        <div class="text-muted small">Service + Department (+ optional Designation)</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <label class="form-label small text-muted">Service</label>
                    <select class="form-select" name="garage_service_id" id="ruleService" required>
                        <option value="">— Select —</option>
                        @foreach(($services ?? []) as $s)
                            <option value="{{ $s->id }}">{{ $s->name }}</option>
                        @endforeach
                    </select>
                    <label class="form-label small text-muted mt-3">Department</label>
                    <select class="form-select" name="garage_department_id" id="ruleDepartment" required>
                        <option value="">— Select —</option>
                        @foreach(($departments ?? []) as $d)
                            <option value="{{ $d->id }}">{{ $d->name }}</option>
                        @endforeach
                    </select>
                    <label class="form-label small text-muted mt-3">Designation (optional)</label>
                    <select class="form-select" name="garage_designation_id" id="ruleDesignation">
                        <option value="">All designations in selected department</option>
                        @foreach(($designations ?? []) as $des)
                            <option value="{{ $des->id }}" data-department-id="{{ $des->garage_department_id }}">{{ $des->name }}</option>
                        @endforeach
                    </select>
                    <div class="form-check mt-3">
                        <input class="form-check-input" type="checkbox" value="1" id="ruleActive" name="is_active" checked>
                        <label class="form-check-label" for="ruleActive">Active</label>
                    </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 rule</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    (function () {
        const department = document.getElementById('ruleDepartment');
        const designation = document.getElementById('ruleDesignation');
        function filterRuleDesignation() {
            if (!department || !designation) return;
            const depId = String(department.value || '');
            Array.from(designation.options || []).forEach(function (opt, idx) {
                if (idx === 0) return;
                const optionDep = String(opt.getAttribute('data-department-id') || '');
                opt.hidden = !!depId && optionDep !== depId;
            });
            const current = designation.options[designation.selectedIndex];
            if (current && current.hidden) designation.value = '';
        }
        if (department && designation) {
            department.addEventListener('change', filterRuleDesignation);
            filterRuleDesignation();
        }
    })();
</script>
@endpush
@endsection