@extends('layouts.app', ['title' => 'Krankmeldungen'])
@section('content')

<div class="container-fluid py-4" style="max-width:1200px;">

    {{-- Header --}}
    <div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
        <h4 class="fw-bold mb-0">
            <i class="bi bi-thermometer-half me-2 text-danger"></i>Krankmeldungen
        </h4>
        <div class="d-flex align-items-center gap-2">
            <div class="card border-0 shadow-sm px-3 py-2">
                <div class="d-flex align-items-center gap-2">
                    <i class="bi bi-person-x text-danger fs-5"></i>
                    <div>
                        <div class="text-muted" style="font-size:.72rem;">Krank heute</div>
                        <div class="fw-bold">{{ $Sick_Request_heute }} Mitarbeiter</div>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-success rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#new">
                <i class="bi bi-plus-lg me-1"></i>Neue Krankmeldung
            </button>
        </div>
    </div>

    @if(session('msg'))
        <div class="alert alert-success alert-dismissible fade show">
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            {{ session('msg') }}
        </div>
    @endif

    {{-- Aktuelle Krankmeldungen --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white border-bottom px-3 py-2">
            <span class="fw-semibold">Aktuelle Krankmeldungen</span>
        </div>
        <div class="card-body p-0">
            <table class="table table-hover align-middle mb-0" style="font-size:0.82rem;">
                <thead class="table-light">
                    <tr>
                        <th class="ps-3">Mitarbeiter</th>
                        <th>Von</th>
                        <th>Bis</th>
                        <th>Arbeitstage</th>
                        <th>Grund</th>
                        <th class="pe-3" style="width:80px;"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($Sick_Request as $item)
                        <tr>
                            <td class="ps-3 fw-semibold">{{ $item->get_employee->first_name }} {{ $item->get_employee->last_name }}</td>
                            <td>{{ Carbon\Carbon::parse($item->date_from)->format('d.m.Y') }}</td>
                            <td>{{ Carbon\Carbon::parse($item->date_to)->format('d.m.Y') }}</td>
                            <td>{{ $item->days_number }}</td>
                            <td class="text-muted">{{ $item->reason }}</td>
                            <td class="pe-3 text-end">
                                <div class="d-flex gap-1 justify-content-end">
                                    <button type="button" class="btn btn-outline-secondary rounded-circle p-0"
                                        style="width:28px;height:28px;" onclick="editItem({{ $item->id }})" title="Bearbeiten">
                                        <i class="bi bi-pencil" style="font-size:.7rem;"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-danger rounded-circle p-0 delete_btn"
                                        style="width:28px;height:28px;" data-bs-toggle="modal"
                                        data-bs-target="#delete-item" data-id="{{ $item->id }}" title="Löschen">
                                        <i class="bi bi-trash" style="font-size:.7rem;"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <i class="bi bi-inbox d-block fs-2 opacity-25 mb-2"></i>
                                Keine Krankmeldungen vorhanden
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Zusammenfassung --}}
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom px-3 py-2">
            <span class="fw-semibold">Zusammenfassung nach Jahr</span>
        </div>
        <div class="card-body p-0">
            @if($Sick_Request->count() > 0)
                @php
                    $sickRequests_years = $Sick_Request->where('is_deleted', 0)->groupBy(function ($request) {
                        return Carbon\Carbon::parse($request->date_from)->format('Y');
                    });
                @endphp
                <table class="table table-hover align-middle mb-0" style="font-size:0.82rem;">
                    <thead class="table-light">
                        <tr>
                            <th class="ps-3">Jahr</th>
                            <th>Mitarbeiter</th>
                            <th class="pe-3">Krankheitstage gesamt</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($sickRequests_years as $year => $requests)
                            <tr class="table-secondary">
                                <td colspan="3" class="ps-3 fw-semibold small text-uppercase text-muted py-2">
                                    <i class="bi bi-calendar me-1"></i>{{ $year }}
                                </td>
                            </tr>
                            @php
                                $grouped = $requests->groupBy('fk_employee_id')->map(function ($r) {
                                    return [
                                        'employee_name' => $r->first()->get_employee->first_name . ' ' . $r->first()->get_employee->last_name,
                                        'total_days' => $r->sum('days_number'),
                                    ];
                                });
                            @endphp
                            @foreach($grouped as $emp)
                                <tr>
                                    <td class="ps-3"></td>
                                    <td class="fw-semibold">{{ $emp['employee_name'] }}</td>
                                    <td class="pe-3">
                                        <span class="badge bg-danger rounded-pill">{{ $emp['total_days'] }} Tage</span>
                                    </td>
                                </tr>
                            @endforeach
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="text-center py-5 text-muted">
                    <i class="bi bi-inbox d-block fs-2 opacity-25 mb-2"></i>
                    Keine Daten vorhanden
                </div>
            @endif
        </div>
    </div>

</div>

{{-- Modal: Neue Krankmeldung --}}
<div class="modal fade" id="new" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold">Neue Krankmeldung</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('hrm.krankmeldung.new') }}" method="POST" novalidate>
                @csrf
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label fw-semibold">Mitarbeiter</label>
                            @if(!empty($employee))
                                <select class="form-select" id="employee_id" name="employee_id">
                                    @foreach($employee as $item)
                                        <option value="{{ $item->employee_id }}">{{ $item->first_name }} {{ $item->last_name }}</option>
                                    @endforeach
                                </select>
                            @else
                                <input type="text" class="form-control" id="employee_id2" name="employee_id2">
                            @endif
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Datum von</label>
                            <input type="date" class="form-control" id="date_from" name="date_from">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Datum bis</label>
                            <input type="date" class="form-control" id="date_to" name="date_to">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Arbeitstage</label>
                            <input type="text" class="form-control" id="days_number" name="days_number">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Grund</label>
                            <input type="text" class="form-control" id="reason" name="reason">
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-outline-secondary rounded-pill px-3" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-success rounded-pill px-3">Speichern</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal: Bearbeiten --}}
<div class="modal fade" id="update" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold">Krankmeldung bearbeiten</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('hrm.krankmeldung.update') }}" method="POST" novalidate>
                @csrf
                <input type="hidden" name="update_id" id="update_id">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label fw-semibold">Mitarbeiter</label>
                            <input type="text" class="form-control" id="employee_name_update" disabled>
                            <input type="hidden" id="employee_id_update" name="employee_id_update">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Datum von</label>
                            <input type="date" class="form-control" id="date_from_update" name="date_from">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Datum bis</label>
                            <input type="date" class="form-control" id="date_to_update" name="date_to">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Arbeitstage</label>
                            <input type="text" class="form-control" id="days_number_update" name="days_number">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Grund</label>
                            <input type="text" class="form-control" id="reason_update" name="reason">
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-outline-secondary rounded-pill px-3" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-3">Aktualisieren</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal: Löschen --}}
<div class="modal fade" id="delete-item" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold text-danger"><i class="bi bi-trash me-2"></i>Krankmeldung löschen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('hrm.krankmeldung.delete') }}" method="POST">
                @csrf
                <input type="hidden" id="did" name="did">
                <div class="modal-body">
                    <p>Möchten Sie diese Krankmeldung wirklich löschen?</p>
                    <p class="text-danger small mb-0"><i class="bi bi-exclamation-triangle me-1"></i>Dieser Vorgang kann nicht rückgängig gemacht werden.</p>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-outline-secondary rounded-pill px-3" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-danger rounded-pill px-3">Löschen</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
$(document).on('click', '.delete_btn', function() {
    $('#did').val($(this).data('id'));
});

var employees = @json($employee);

function editItem(id) {
    var url = "{{ route('hrm.krankmeldung.get', ':id') }}";
    url = url.replace(':id', id);
    $.get(url, function(item) {
        if (item) {
            var emp = employees.find(e => e.employee_id === item.fk_employee_id);
            $('#update_id').val(item.id);
            $('#employee_id_update').val(item.fk_employee_id);
            $('#employee_name_update').val(emp ? emp.first_name + ' ' + emp.last_name : '');
            $('#date_from_update').val(item.date_from);
            $('#date_to_update').val(item.date_to);
            $('#reason_update').val(item.reason);
            $('#days_number_update').val(item.days_number);
            new bootstrap.Modal(document.getElementById('update')).show();
        }
    });
}
</script>

@endsection