@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-3">
        <div class="card shadow-sm mb-3">
            <div class="card-body p-3">
                <div class="row align-items-center">
                    <div class="col-lg">
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-0" onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();">
                                <i class="fas fa-bolt me-1"></i>
                                Execute
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm" style="max-width: 560px;">
            <div class="card-body p-3">
                <h6 class="mb-3 text-dark font-weight-bold">Filter Layout Report</h6>
                <hr class="horizontal dark mt-0">

                <form method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                    @csrf
                    <div class="form-group mb-3">
                        <label class="form-control-label font-weight-bold">Tanggal Mulai</label>
                        <input class="form-control" type="date" name="tanggal_mulai" value="{{ old('tanggal_mulai', $filter['tanggal_mulai'] ?? '') }}">
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-control-label font-weight-bold">Tanggal Akhir</label>
                        <input class="form-control" type="date" name="tanggal_akhir" value="{{ old('tanggal_akhir', $filter['tanggal_akhir'] ?? '') }}">
                        @error('tanggal_akhir')
                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-control-label font-weight-bold">Departemen</label>
                        <select class="form-select" name="departemen" id="filter_departemen">
                            <option value="semua" {{ old('departemen', $filter['departemen'] ?? '') == 'semua' || old('departemen', $filter['departemen'] ?? '') == '' ? 'selected' : '' }}>Tampilkan Semua</option>
                            @foreach (($departemen_options ?? []) as $dept)
                                <option value="{{ $dept->nama }}" {{ old('departemen', $filter['departemen'] ?? '') == $dept->nama ? 'selected' : '' }}>{{ $dept->nama }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-control-label font-weight-bold">Status Karyawan</label>
                        @php
                            $statusFilterForRole = $status_filter_for_role ?? [
                                'is_krl_role' => false,
                                'is_hrd_role' => false,
                                'preselected_status_ids' => [],
                                'readonly' => false,
                                'message' => '',
                            ];
                            $selectedStatusIds = $statusFilterForRole['preselected_status_ids'] ?? ($filter['status_karyawan'] ?? []);
                            if (!is_array($selectedStatusIds)) $selectedStatusIds = [$selectedStatusIds];
                            $selectedStatusIdStrings = array_map('strval', $selectedStatusIds);
                        @endphp
                        <select class="form-control select2" name="status_karyawan[]" id="filter_status_karyawan" multiple
                            {{ $statusFilterForRole['readonly'] ? 'disabled' : '' }}>
                            <option value="all" {{ empty($selectedStatusIds) ? 'selected' : '' }}>Tampilkan Semua</option>
                            @foreach (($status_karyawan_options ?? []) as $st)
                                <option value="{{ $st->id }}" {{ in_array((string) $st->id, $selectedStatusIdStrings, true) ? 'selected' : '' }}>{{ $st->nama }}</option>
                            @endforeach
                        </select>
                        @if (!empty($statusFilterForRole['message']))
                            <p class="text-muted text-xs pt-1 mb-0">{{ $statusFilterForRole['message'] }}</p>
                        @endif
                    </div>

                    <div class="form-group mb-0">
                        <label class="form-control-label font-weight-bold">Layout Report</label>
                        <select class="form-select" name="layout" id="filter_layout">
                            <option value="overall" {{ old('layout', $filter['layout'] ?? 'overall') == 'overall' ? 'selected' : '' }}>1. Layout Overall Karyawan</option>
                            <option value="keterlambatan" {{ old('layout', $filter['layout'] ?? '') == 'keterlambatan' ? 'selected' : '' }}>2. Layout Keterlambatan</option>
                        </select>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        function normalizeStatusKaryawanSelection(event) {
            const select = document.getElementById('filter_status_karyawan');
            if (!select) return;
            const values = Array.from(select.selectedOptions).map(option => option.value);
            const selectedValue = event && event.params && event.params.data
                ? String(event.params.data.id)
                : '';
            if (selectedValue === 'all') {
                $(select).val(['all']).trigger('change.select2');
            } else if (selectedValue !== '' && values.includes('all')) {
                $(select).val(values.filter(value => value !== 'all')).trigger('change.select2');
            } else if (values.length === 0) {
                $(select).val(['all']).trigger('change.select2');
            }
        }

        function initStatusKaryawanSelect2() {
            const isReadonly = {{ ($status_filter_for_role['readonly'] ?? false) ? 'true' : 'false' }};
            $('#filter_status_karyawan').select2({
                placeholder: 'Pilih Status Karyawan',
                allowClear: !isReadonly,
                width: '100%',
                closeOnSelect: !isReadonly,
                disabled: isReadonly,
            });
        }

        $(document).ready(function() {
            $(document).on('select2:select select2:unselect', '#filter_status_karyawan', normalizeStatusKaryawanSelection);
            if (typeof $.fn.select2 === 'undefined') {
                $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">');
                $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap.css">');
                $.getScript('https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js')
                    .done(initStatusKaryawanSelect2);
            } else {
                initStatusKaryawanSelect2();
            }
        });
    </script>
@endpush