<div class="modal fade lead-modal" id="lead-modal" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content data">
            <div class="modal-header modal-header-image mb-3">
                <h5 class="modal-title text-white">{{ @$data['title'] }} </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa fa-times text-white" aria-hidden="true"></i>
                </button>
            </div>
            <div class="modal-body">
                <form action="{{ $data['url'] }}" class="row p-2" method="post" id="modal_values" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group mb-3">
                        <label class="form-label">{{ _trans('common.Month') }} <span class="text-danger">*</span></label>
                        <input type="month" class="form-control ot-form-control ot-input" name="month" value="{{ date('Y-m') }}" required />
                    </div>
                    <div class="d-flex align-items-center gap-3 mb-1 mt-1">
                        <div class="form-check">
                            <input onchange="toggleGenerateType(this)" class="form-check-input" type="radio" name="generate_by" id="departmentWise" value="department" checked>
                            <label class="form-check-label" for="departmentWise">
                                {{ _trans('common.Department Wise') }}
                            </label>
                        </div>
                        <div class="form-check">
                            <input onchange="toggleGenerateType(this)" class="form-check-input" type="radio" name="generate_by" id="employeeWise" value="employee">
                            <label class="form-check-label" for="employeeWise">
                                {{ _trans('common.Employee Wise') }}
                            </label>
                        </div>
                    </div>
                    <div class="form-group mb-3" id="departmentSelect">
                        <select id="department_id" class="form-select mb-3 modal_select2" name="department_id">
                            <option value="">{{ _trans('common.Select') }}</option>
                            @foreach ($data['departments'] ?? [] as $id => $title)
                                <option value="{{ $id }}">{{ $title }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mb-3 d-none" id="employeeSelect">
                        <select id="user_id" class="form-select mb-3 modal_select2" name="user_id">
                            <option value="">{{ _trans('common.Select') }}</option>
                            @foreach ($data['employees'] ?? []  as $employee)
                                <option value="{{ $employee->id }}">{{ $employee->name }} [{{ @$employee->designation->title }}]</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group d-flex justify-content-end">
                        <button type="button" class="btn btn-gradian pull-right hit_modal">{{ @$data['button'] }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="{{ global_asset('backend/js/fs_d_ecma/modal/__modal.min.js') }}"></script>
<script src="{{ global_asset('backend/js/__loader.js') }}"></script>

<script>
    function toggleGenerateType (obj) {
        $('#department_id').val('');
        $('#user_id').val('');

        $('.modal_select2').select2({
            dropdownParent: $(".modal-content"),
            width: "100%",
        });

        if ($(obj).val() == 'department') {
            $('#departmentSelect').removeClass('d-none');
            $('#employeeSelect').addClass('d-none');
        } else {
            $('#departmentSelect').addClass('d-none');
            $('#employeeSelect').removeClass('d-none');
        }
    }
</script>

<script>
    
    // Month Selector
    document.querySelectorAll('.month-picker').forEach((element) => {
        jSuites.calendar(element, {
            type: 'year-month-picker',  
            format: 'MMM-YYYY', 
        });
    });

</script>
