@extends('app-new')
@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">

    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/new-style.css">

    <style>
        .filter-box.filter-box-compact {
            padding: 16px !important;
        }

        .filter-box-compact label {
            display: block;
            margin-bottom: 4px;
        }

        .filter-box-compact .select2-container {
            width: 100% !important;
        }

        .filter-box-compact .btn {
            height: 38px;
        }

        .filter-box-compact .select2-container .select2-search--inline .select2-search__field,
        .filter-box-compact .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .leave-report-table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            white-space: nowrap;
            background: #f1f5f9;
        }

        .leave-report-table th.employee-cell,
        .leave-report-table td.employee-cell {
            position: sticky;
            left: 0;
            z-index: 1;
            background: #ffffff;
        }

        .leave-report-table thead th.employee-cell {
            z-index: 3;
        }

        .leave-report-table .employee-cell {
            min-width: 190px;
            white-space: nowrap;
        }

        .leave-report-table .employee-cell .emp-name {
            font-weight: 600;
            color: #1f2937;
        }

        .leave-report-table .employee-cell .emp-meta {
            font-size: 11px;
            color: #6b7280;
        }

        .leave-report-table .leave-type-cell {
            font-weight: 500;
            color: #374151;
            min-width: 130px;
            white-space: nowrap;
            background: #ffffff;
        }

        .leave-report-table td.month-cell {
            text-align: center;
            min-width: 56px;
        }

        .leave-report-table tbody tr.employee-group-start td {
            border-top: 2px solid #e5e7eb;
        }

        .leave-report-table .value-nonzero {
            font-weight: 600;
            color: #6d28d9;
        }

        .leave-report-table .value-zero {
            color: #cbd5e1;
        }

        .leave-report-table-wrap {
            max-height: 70vh;
            overflow: auto;
        }
    </style>
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Monthly Consumed Leaves</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/home">{{ trans('common/common.home') }}</a>
                    </li>
                    <li class="breadcrumb-item active">Monthly Consumed Leaves</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section id="dashboard-ecommerce" class="py-2">
        <div class="filter-box filter-box-compact mb-2">
            <form>
                <div class="d-flex flex-wrap align-items-end gap-3">
                    <div style="width: 130px;">
                        <label for="year">Year</label>
                        <select class="form-control select2" name="year" id="year">
                            @foreach ($years as $yearOption)
                                <option value="{{ $yearOption }}" {{ $yearOption == $year ? 'selected' : '' }}>
                                    {{ $yearOption }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex-fill" style="min-width: 220px;">
                        <label for="leave_type_ids">Leave Type</label>
                        <select class="form-control select2" name="leave_type_ids[]" id="leave_type_ids" multiple>
                            @foreach ($allLeaveTypes as $leaveType)
                                <option value="{{ $leaveType->id }}"
                                    {{ in_array($leaveType->id, $request->leave_type_ids ?: []) ? 'selected' : '' }}>
                                    {{ ucwords($leaveType->name) }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex-fill" style="min-width: 260px;">
                        <label for="employee_ids">Employee</label>
                        <select class="form-control select2" name="employee_ids[]" id="employee_ids" multiple>
                            @foreach ($selectedEmployees as $employee)
                                <option value="{{ $employee->id }}" selected>
                                    {{ ucwords($employee->name) }} ({{ $employee->employee_code }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="d-flex gap-2">
                        <button class="btn btn-primary-main d-inline-flex align-items-center justify-content-center"
                            style="width: 38px; height: 38px; padding: 0;"
                            title="{{ trans('common/common.search') }}">
                            <i data-feather="search"></i>
                        </button>
                        <a class="btn btn-primary-main d-inline-flex align-items-center justify-content-center"
                            style="width: 38px; height: 38px; padding: 0;"
                            href="/{{ $alias }}/monthly-consumed-leaves/export?{{ request()->getQueryString() }}"
                            title="{{ trans('common/common.excel') }}">
                            <i data-feather="download"></i>
                        </a>
                    </div>
                </div>
            </form>
        </div>

        <div class="card new-card">
            <div class="card-body p-0">
                <div class="leave-report-table-wrap">
                    <table class="table modern-table table-bordered leave-report-table mb-0">
                        <thead>
                            <tr>
                                <th class="employee-cell">Employee</th>
                                <th>Date of Joining</th>
                                <th class="leave-type-cell">Leave Type</th>
                                @foreach ($months as $month)
                                    <th class="text-center">{{ \Carbon\Carbon::parse($month . '-01')->format('M') }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($employees as $employee)
                                @php $rowCount = max($leaveTypes->count(), 1); @endphp
                                @forelse ($leaveTypes as $index => $leaveType)
                                    <tr class="{{ $index === 0 ? 'employee-group-start' : '' }}">
                                        @if ($index === 0)
                                            <td rowspan="{{ $rowCount }}" class="employee-cell">
                                                <div class="emp-name">{{ ucwords($employee->name) }}</div>
                                                <div class="emp-meta">{{ $employee->employee_code }}</div>
                                            </td>
                                            <td rowspan="{{ $rowCount }}">
                                                {{ $employee->date_of_joining ? \Carbon\Carbon::parse($employee->date_of_joining)->format('d M Y') : '-' }}
                                            </td>
                                        @endif
                                        <td class="leave-type-cell">{{ ucwords($leaveType->name) }}</td>
                                        @foreach ($months as $month)
                                            @php $value = $consumption[$employee->id][$month][$leaveType->id] ?? 0; @endphp
                                            <td class="month-cell {{ $value > 0 ? 'value-nonzero' : 'value-zero' }}">
                                                {{ $value > 0 ? rtrim(rtrim(number_format($value, 2), '0'), '.') : '-' }}
                                            </td>
                                        @endforeach
                                    </tr>
                                @empty
                                    <tr class="employee-group-start">
                                        <td class="employee-cell">
                                            <div class="emp-name">{{ ucwords($employee->name) }}</div>
                                            <div class="emp-meta">{{ $employee->employee_code }}</div>
                                        </td>
                                        <td>
                                            {{ $employee->date_of_joining ? \Carbon\Carbon::parse($employee->date_of_joining)->format('d M Y') : '-' }}
                                        </td>
                                        <td class="leave-type-cell">-</td>
                                        @foreach ($months as $month)
                                            <td class="month-cell value-zero">-</td>
                                        @endforeach
                                    </tr>
                                @endforelse
                            @empty
                                <tr>
                                    <td colspan="{{ 3 + count($months) }}" class="text-center py-4">No records found</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-center mt-2">
            {{ $employees->links('pagination::bootstrap-4') }}
        </div>
    </section>
@endsection

@push('footer-script')
    <script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="{{ asset('js/common-script.js') }}"></script>
    <script>
        $(window).on('load', function() {
            $('#year, #leave_type_ids').select2({
                width: '100%'
            });

            $('#employee_ids').select2({
                width: '100%',
                ajax: {
                    url: '/ajax/hod-list',
                    dataType: 'json',
                    data: function(params) {
                        return {
                            alias: '{!! $alias !!}',
                            search: params.term,
                            only_current_organization: true
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: $.map(data.data, function(item) {
                                return {
                                    id: item.id,
                                    text: item.name + (item.employee_code ? ' (' + item
                                            .employee_code + ')' : ''),
                                };
                            })
                        };
                    },
                    cache: true
                },
                placeholder: 'Search by name or code',
                minimumInputLength: 1,
                allowClear: true
            });

            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        });
    </script>
@endpush