@extends('garage.layouts.app')

@section('title', $title)

@section('content')
@include('garage.hr.styles')

<div class="container-fluid px-3 py-3 hrx-page">
    <div class="hrx-head mb-3">
        <div>
            <div class="h4 mb-0">{{ $title }}</div>
            <div class="text-muted small">Add and manage {{ strtolower($title) }} for employees.</div>
        </div>
        <div class="d-flex flex-wrap gap-2 justify-content-end hrx-actions-bar">
            <span class="hrx-chip">
                <span class="hrx-muted">Type</span>
                <strong class="text-capitalize">{{ $type }}</strong>
            </span>
            <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#adjModal" data-mode="create">
                <i class="bi bi-plus-lg me-1"></i>Add
            </button>
        </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">
        <div class="card-body py-2">
            <input type="hidden" name="type" value="{{ $type }}">
            <div class="row g-2 align-items-center">
                <div class="col-md-3">
                    <label class="form-label small mb-1 hrx-muted">Month (optional)</label>
                    <input type="month" name="month" value="{{ $month }}" class="form-control form-control-sm">
                </div>
                <div class="col-md-4">
                    <label class="form-label small mb-1 hrx-muted">Search</label>
                    <input name="search" value="{{ $search }}" class="form-control form-control-sm" placeholder="Employee / code / reason…">
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button class="btn btn-sm btn-outline-primary w-100">Filter</button>
                </div>
                <div class="col-md-3 d-flex align-items-end justify-content-end">
                    <a class="btn btn-sm btn-outline-secondary" href="{{ route('garage.employee-adjustments.index', ['type' => $type]) }}">Reset</a>
                </div>
            </div>
        </div>
    </form>

    <div class="card hrx-card">
        <div class="table-responsive">
            <table class="table table-sm mb-0 hrx-table align-middle">
                <thead class="table-light">
                <tr>
                    <th>Employee</th>
                    <th class="text-end">Amount</th>
                    <th class="text-end">Month</th>
                    <th>Reason</th>
                    <th class="text-end">Status</th>
                    <th class="text-end">Voucher</th>
                    <th class="text-end" style="width: 170px;">Actions</th>
                </tr>
                </thead>
                <tbody>
                @forelse($rows as $r)
                    <tr>
                        <td>
                            <div class="fw-semibold">
                                @if(!empty($r->employee_ledger_id))
                                    <a class="text-decoration-none" href="{{ route('garage.ledger-reports.ledger', $r->employee_ledger_id) }}">{{ $r->employee_name }}</a>
                                @else
                                    {{ $r->employee_name }}
                                @endif
                            </div>
                            <div class="small hrx-muted">{{ $r->employee_code ?: '—' }}</div>
                        </td>
                        <td class="text-end fw-semibold">{{ number_format((float)$r->amount, 2) }}</td>
                        <td class="text-end small">{{ $r->month ?: '—' }}</td>
                        <td class="small">{{ $r->reason ?: '—' }}</td>
                        <td class="text-end">
                            @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
                            @if($r->is_recurring)
                                <span class="badge bg-info-subtle text-info border border-info-subtle">Recurring</span>
                            @endif
                        </td>
                        <td class="text-end">
                            @if(!empty($r->garage_voucher_id))
                                <a class="btn btn-sm btn-outline-primary" href="{{ route('garage.vouchers.show', $r->garage_voucher_id) }}" target="_blank">View</a>
                            @else
                                <span class="text-muted small">—</span>
                            @endif
                        </td>
                        <td class="text-end hrx-actions">
                            <button
                                type="button"
                                class="btn btn-sm btn-outline-secondary"
                                data-bs-toggle="modal"
                                data-bs-target="#adjModal"
                                data-mode="edit"
                                data-id="{{ $r->id }}"
                                data-employee_id="{{ $r->garage_employee_id }}"
                                data-month="{{ $r->month }}"
                                data-adj_date="{{ $r->adj_date }}"
                                data-amount="{{ $r->amount }}"
                                data-reason="{{ e($r->reason ?? '') }}"
                                data-is_recurring="{{ (int)($r->is_recurring ?? 0) }}"
                                data-is_active="{{ (int)($r->is_active ?? 0) }}"
                            >Edit</button>
                            <form method="post" action="{{ route('garage.employee-adjustments.destroy', $r->id) }}?type={{ $type }}" class="d-inline" onsubmit="return confirm('Remove this record?');">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger">Remove</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="text-muted p-3">No records found.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        <div class="card-body py-2">
            {{ $rows->links() }}
        </div>
    </div>
</div>

<div class="modal fade hrx-modal" id="adjModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <form method="post" id="adjForm" action="{{ route('garage.employee-adjustments.store') }}">
                @csrf
                <input type="hidden" name="type" value="{{ $type }}">
                <input type="hidden" name="_method" id="adjMethod" value="POST">

                <div class="modal-header">
                    <div>
                        <div class="fw-semibold" id="adjModalTitle">Add {{ rtrim($title,'s') }}</div>
                        <div class="small text-muted">Quick entry (no separate screen).</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label small text-muted">Apply scope</label>
                            <select class="form-select" name="apply_scope" id="adjScope">
                                <option value="single">Single employee</option>
                                <option value="all">All employees</option>
                                <option value="department">Department wise</option>
                                <option value="designation">Designation wise</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted">Employee</label>
                            <select class="form-select" name="garage_employee_id" id="adjEmployee" required>
                                <option value="">— Select —</option>
                                @foreach($employees as $e)
                                    <option value="{{ $e->id }}">{{ $e->name }} @if($e->code) · {{ $e->code }} @endif</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small text-muted">Department</label>
                            <select class="form-select" name="garage_department_id" id="adjDepartment">
                                <option value="">— Any —</option>
                                @foreach(($departments ?? []) as $d)
                                    <option value="{{ $d->id }}">{{ $d->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small text-muted">Designation</label>
                            <select class="form-select" name="garage_designation_id" id="adjDesignation">
                                <option value="">— Any —</option>
                                @foreach(($designations ?? []) as $d)
                                    <option value="{{ $d->id }}" data-department-id="{{ $d->garage_department_id }}">{{ $d->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small text-muted">Month (optional)</label>
                            <input type="month" class="form-control" name="month" id="adjMonth" value="">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small text-muted">Date (optional)</label>
                            <input type="date" class="form-control" name="adj_date" id="adjDate" value="">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label small text-muted">Amount</label>
                            <input type="number" step="0.01" min="0" class="form-control" name="amount" id="adjAmount" required>
                        </div>
                        <div class="col-md-8">
                            <label class="form-label small text-muted">Reason</label>
                            <input type="text" class="form-control" name="reason" id="adjReason" placeholder="Optional">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small text-muted">Min rating score</label>
                            <input type="number" step="0.01" min="0" max="100" class="form-control" name="rating_min_score" id="adjRatingScore" placeholder="Optional">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small text-muted">Rating value</label>
                            <input type="text" class="form-control" name="rating_value" id="adjRatingValue" placeholder="Optional (A+, Good)">
                        </div>

                        <div class="col-md-12 d-flex flex-wrap gap-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="1" id="adjRecurring" name="is_recurring">
                                <label class="form-check-label" for="adjRecurring">Recurring</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="1" id="adjActive" name="is_active" checked>
                                <label class="form-check-label" for="adjActive">Active</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-info" id="adjPreviewBtn">Preview matched employees</button>
                    <span class="small text-muted me-auto" id="adjPreviewResult"></span>
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary" id="adjSubmitBtn">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    (function () {
        var modal = document.getElementById('adjModal');
        if (!modal) return;

        function applyScopeState(mode) {
            var scope = document.getElementById('adjScope');
            var emp = document.getElementById('adjEmployee');
            var dep = document.getElementById('adjDepartment');
            var des = document.getElementById('adjDesignation');
            if (!scope || !emp || !dep || !des) return;

            var s = scope.value || 'single';
            var isEdit = mode === 'edit';
            scope.disabled = isEdit;
            emp.required = !isEdit && s === 'single';
            dep.required = !isEdit && s === 'department';
            des.required = !isEdit && s === 'designation';
            emp.disabled = isEdit || s !== 'single';
            dep.disabled = isEdit || s !== 'department';
            des.disabled = isEdit || s !== 'designation';
        }

        modal.addEventListener('show.bs.modal', function (ev) {
            var btn = ev.relatedTarget;
            var mode = btn && btn.getAttribute('data-mode') ? btn.getAttribute('data-mode') : 'create';

            var form = document.getElementById('adjForm');
            var method = document.getElementById('adjMethod');
            var title = document.getElementById('adjModalTitle');
            var submit = document.getElementById('adjSubmitBtn');

            var emp = document.getElementById('adjEmployee');
            var month = document.getElementById('adjMonth');
            var date = document.getElementById('adjDate');
            var amt = document.getElementById('adjAmount');
            var reason = document.getElementById('adjReason');
            var recurring = document.getElementById('adjRecurring');
            var active = document.getElementById('adjActive');

            if (mode === 'edit') {
                var id = btn.getAttribute('data-id');
                form.action = @json(url('/garage/employee-adjustments')) + '/' + id;
                method.value = 'PUT';
                title.textContent = 'Edit ' + @json(rtrim($title,'s'));
                submit.textContent = 'Save changes';

                emp.value = btn.getAttribute('data-employee_id') || '';
                month.value = btn.getAttribute('data-month') || '';
                date.value = btn.getAttribute('data-adj_date') || '';
                amt.value = btn.getAttribute('data-amount') || '';
                reason.value = btn.getAttribute('data-reason') || '';
                recurring.checked = (btn.getAttribute('data-is_recurring') || '0') === '1';
                active.checked = (btn.getAttribute('data-is_active') || '0') === '1';
                document.getElementById('adjScope').value = 'single';
                document.getElementById('adjDepartment').value = '';
                document.getElementById('adjDesignation').value = '';
                document.getElementById('adjRatingScore').value = '';
                document.getElementById('adjRatingValue').value = '';
            } else {
                form.action = @json(route('garage.employee-adjustments.store'));
                method.value = 'POST';
                title.textContent = 'Add ' + @json(rtrim($title,'s'));
                submit.textContent = 'Save';

                emp.value = '';
                month.value = '';
                date.value = '';
                amt.value = '';
                reason.value = '';
                recurring.checked = false;
                active.checked = true;
                document.getElementById('adjScope').value = 'single';
                document.getElementById('adjDepartment').value = '';
                document.getElementById('adjDesignation').value = '';
                document.getElementById('adjRatingScore').value = '';
                document.getElementById('adjRatingValue').value = '';
            }
            setTimeout(function () { applyScopeState(mode); }, 50);
        });

        document.addEventListener('change', function (e) {
            if (e && e.target && e.target.id === 'adjScope') applyScopeState('create');
        });

        var previewBtn = document.getElementById('adjPreviewBtn');
        if (previewBtn) {
            previewBtn.addEventListener('click', function () {
                var form = document.getElementById('adjForm');
                var result = document.getElementById('adjPreviewResult');
                if (!form || !result) return;
                result.textContent = 'Checking...';
                var payload = new FormData(form);
                fetch(@json(route('garage.employee-adjustments.preview-targets')), {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': @json(csrf_token()),
                        'Accept': 'application/json'
                    },
                    body: payload
                })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    var c = Number((data && data.count) || 0);
                    result.textContent = 'Matched employees: ' + c;
                })
                .catch(function () {
                    result.textContent = 'Unable to preview.';
                });
            });
        }

        var adjForm = document.getElementById('adjForm');
        if (adjForm) {
            adjForm.addEventListener('submit', function (e) {
                var scopeEl = document.getElementById('adjScope');
                var resultEl = document.getElementById('adjPreviewResult');
                var scope = scopeEl ? (scopeEl.value || 'single') : 'single';
                if (scope === 'single') return;

                var count = '';
                if (resultEl && resultEl.textContent) {
                    var m = resultEl.textContent.match(/(\d+)/);
                    if (m && m[1]) count = m[1];
                }
                var msg = count
                    ? ('About to apply ' + @json(strtolower(rtrim($title, 's'))) + ' to ' + count + ' employees. Continue?')
                    : ('About to apply ' + @json(strtolower(rtrim($title, 's'))) + ' to multiple employees. Continue?');
                if (!window.confirm(msg)) {
                    e.preventDefault();
                }
            });
        }
    })();
</script>
@endpush
@endsection