@extends('garage.layouts.app')

@section('title', 'Allowances setup')

@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-cash-coin me-2 text-primary"></i>Allowances setup</div>
            <div class="text-muted small">Create fixed and variable allowance definitions for employee forms.</div>
        </div>
        <div class="d-flex gap-2 hrx-actions-bar">
            <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#allowanceModal" data-mode="create">
                <i class="bi bi-plus-lg me-1"></i>Add
            </button>
            <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

    <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 allowance...">
                </div>
                <div class="col-md-3">
                    <select name="type" class="form-select form-select-sm">
                        <option value="all" @selected($type === 'all')>All types</option>
                        <option value="fixed" @selected($type === 'fixed')>Fixed</option>
                        <option value="variable" @selected($type === 'variable')>Variable</option>
                    </select>
                </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>Name</th>
                    <th>Type</th>
                    <th class="text-end">Default amount</th>
                    <th class="text-end">Status</th>
                    <th class="text-end" style="width: 160px;">Actions</th>
                </tr>
                </thead>
                <tbody>
                @forelse($definitions as $d)
                    <tr>
                        <td class="fw-semibold">{{ $d->name }}</td>
                        <td>
                            <span class="badge {{ $d->allowance_type === 'fixed' ? 'bg-primary-subtle text-primary border border-primary-subtle' : 'bg-warning-subtle text-warning border border-warning-subtle' }}">
                                {{ ucfirst($d->allowance_type) }}
                            </span>
                        </td>
                        <td class="text-end">{{ number_format((float) $d->default_amount, 2) }}</td>
                        <td class="text-end">
                            @if($d->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">
                            <div class="d-inline-flex gap-1">
                                <button
                                    type="button"
                                    class="btn btn-sm btn-outline-secondary"
                                    data-bs-toggle="modal"
                                    data-bs-target="#allowanceModal"
                                    data-mode="edit"
                                    data-id="{{ $d->id }}"
                                    data-name="{{ e($d->name) }}"
                                    data-allowance_type="{{ $d->allowance_type }}"
                                    data-default_amount="{{ (float) $d->default_amount }}"
                                    data-is_active="{{ (int) ($d->is_active ?? 0) }}"
                                >Edit</button>
                                <form method="post" action="{{ route('garage.employee-allowances.destroy', $d->id) }}" onsubmit="return confirm('Remove this allowance definition?');">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger">Remove</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="text-muted p-3">No allowance definitions found.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if(method_exists($definitions,'links'))
            <div class="card-body py-2">
                {{ $definitions->links() }}
            </div>
        @endif
    </div>
</div>

<div class="modal fade" id="allowanceModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="post" id="allowanceForm" action="{{ route('garage.employee-allowances.store') }}">
                @csrf
                <input type="hidden" name="_method" id="allowanceMethod" value="POST">
                <div class="modal-header">
                    <div>
                        <div class="fw-semibold" id="allowanceTitle">Add allowance definition</div>
                        <div class="text-muted small">Used in employee add/edit dropdown.</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">Name</label>
                    <input class="form-control mb-2" name="name" id="allowanceName" placeholder="e.g. Fuel allowance" required>

                    <label class="form-label small text-muted">Type</label>
                    <select class="form-select mb-2" name="allowance_type" id="allowanceType" required>
                        <option value="fixed">Fixed</option>
                        <option value="variable">Variable</option>
                    </select>

                    <label class="form-label small text-muted">Default amount</label>
                    <input class="form-control" type="number" min="0" step="0.01" name="default_amount" id="allowanceAmount" value="0">

                    <div class="form-check mt-3">
                        <input class="form-check-input" type="checkbox" value="1" id="allowanceActive" name="is_active" checked>
                        <label class="form-check-label" for="allowanceActive">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" id="allowanceSubmit">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    (function () {
        var modal = document.getElementById('allowanceModal');
        if (!modal) return;
        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('allowanceForm');
            var method = document.getElementById('allowanceMethod');
            var title = document.getElementById('allowanceTitle');
            var name = document.getElementById('allowanceName');
            var type = document.getElementById('allowanceType');
            var amount = document.getElementById('allowanceAmount');
            var active = document.getElementById('allowanceActive');
            var submit = document.getElementById('allowanceSubmit');

            if (mode === 'edit') {
                var id = btn.getAttribute('data-id');
                form.action = @json(url('/garage/employee-allowances')) + '/' + id;
                method.value = 'PUT';
                title.textContent = 'Edit allowance definition';
                submit.textContent = 'Save changes';
                name.value = btn.getAttribute('data-name') || '';
                type.value = btn.getAttribute('data-allowance_type') || 'fixed';
                amount.value = btn.getAttribute('data-default_amount') || 0;
                active.checked = (btn.getAttribute('data-is_active') || '0') === '1';
            } else {
                form.action = @json(route('garage.employee-allowances.store'));
                method.value = 'POST';
                title.textContent = 'Add allowance definition';
                submit.textContent = 'Save';
                name.value = '';
                type.value = 'fixed';
                amount.value = 0;
                active.checked = true;
            }
        });
    })();
</script>
@endpush
@endsection