@extends('hr_main')
@section('title', '| Assessment Evaluation Records')
@section('content')
    <style type="text/css">
        .form-group,
        .form-control {
            font-size: 13px !important;
            color: black !important;

        }



        #reportSubmit {
            font-size: 12px;
            margin-top: 35px;
        }
    </style>
    <script type="text/javascript">
        $("#loadingModal").show();
        $(document).keydown(function(e) {
            if (e.keyCode == 27) return false;
        });
    </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default" style="background-color:#708090;">
                <div class="panel-heading" style="padding-bottom:7px">
                    <h3 style="text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">
                        Assessment Evaluation Records
                    </h3>
                </div>
                <hr style="border-top: 2px solid white; margin-top: 2px; margin-bottom: 10px;">

                <div class="panel-options" style="margin-top: 20px; margin-left: 10px;">
                    <a href="{{ url('hr/assessment/allocateMarks/list/') }}" class="btn btn-info pull-right addViewBtn"
                        style="margin-right: 35px;">
                        <i class="glyphicon glyphicon-plus-sign addIcon"></i>Add Assessment Evaluation</a>

                </div>

                <div class="panel-body panelBodyView">
                    <!-- Filtering Start -->
                    {!! Form::open([
                        'url' => url('assessment/allocateMarks/show'), // Laravel will resolve the full URL correctly
                        'method' => 'get',
                        'role' => 'form',
                        'class' => 'form-horizontal form-groups',
                        'id' => 'filterFormId',
                    ]) !!}
                    <div class="row">
                        <div class="col-md-12" style=" margin-left: 15px;">

                            <!-- Employee Dropdown -->
                            <div class="col-md-2">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Employee:', ['class' => 'control-label', 'style' => 'margin-bottom: 8px;']) !!}


                                        {!! Form::select('filEmployeeLevel', ['' => 'Select Employee'] + $filteringEmployee, null, [
                                            'id' => 'filEmployeeLevel',
                                            'class' => 'form-control input-sm', // <-- added select2
                                            'autocomplete' => 'off',
                                            'autofocus',
                                        ]) !!}

                                    </div>
                                </div>
                            </div>
                            <!-- Evaluation Month -->
                            <div class="col-md-2">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        {!! Form::label('', 'Evaluation Month:', ['class' => 'control-label', 'style' => 'margin-bottom: 8px;']) !!}
                                        <input type="month" id="monthPicker" name="selectedMonth" class="form-control">
                                    </div>
                                    <p id='startMonthFilterError' style="max-height:3px;"></p>
                                </div>
                            </div>
                            <!-- Submit Button -->
                            <div class="col-md-3">
                                <div class="form-group">

                                    {!! Form::label('', '', ['class' => 'control-label ']) !!}

                                    {!! Form::submit('Show ', ['id' => 'reportSubmit', 'class' => 'btn btn-primary btn-xs']) !!}

                                </div>
                            </div>
                        </div> {{-- col-md-12 --}}
                    </div> {{-- row --}}
                    {!! Form::close() !!}
                    <!-- Filtering End -->
                    <div id="reportingDiv"></div>
                </div> {{-- .panel-body --}}
                <hr style="border-top: 2px solid white; margin-top: 2px; margin-bottom: 10px;">
            </div> {{-- .panel --}}

        </div> {{-- .col-md-12 --}}

    </div> {{-- .row --}}

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

    <script>
        $(document).ready(function() {
            // Initialize Select2

            $('#filEmployeeLevel').select2();

            let baseUrl = "{{ url('hr/assessment/allocateMarks/show') }}";

            // Load reporting data
            function loadReportingDiv(queryParams = '') {
                $('#loadingModal').show();
                $("#reportingDiv").load(baseUrl + '?' + queryParams, function(response, status, xhr) {
                    $('#loadingModal').hide();
                    if (status == "error") {
                        $("#reportingDiv").html(
                            '<div class="alert alert-danger">Failed to load data.</div>');
                        console.error("Error loading data:", xhr.status, xhr.statusText);
                    }
                });
            }

            // Initial load
            loadReportingDiv();

            // Form submit via AJAX
            $("#filterFormId").submit(function(event) {
                event.preventDefault();
                var serializeValue = $(this).serialize();
                $('#loadingModal').show();
                $("#reportingDiv").load(baseUrl + '?' + serializeValue);
            });

            // Pagination click
            $(document).on('click', '.pagination a', function(event) {
                event.preventDefault();
                var url = $(this).attr('href');
                $('#loadingModal').show();
                $("#reportingDiv").load(url);
            });

            $("#loadingModal").hide();
        });
    </script>


@endsection