kpi_entry_let<x-backend.layouts.master>
    <x-slot name="pageTitle">
        Late Percentage Data Entry Form
    </x-slot>

    <x-slot name='breadCrumb'>
        <x-backend.layouts.elements.breadcrumb>
            <x-slot name="pageHeader"> KPI Data Entry Form </x-slot>

            <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('supervisor_assigns.index') }}">KPI Data Entry Form </a></li>
        </x-backend.layouts.elements.breadcrumb>
    </x-slot>

    <section class="content">
        <div class="container-fluid">

            @if (session('message'))
                <div class="alert alert-success">
                    <span class="close" data-dismiss="alert">&times;</span>
                    <strong>{{ session('message') }}.</strong>
                </div>
            @endif

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="row">

                                <div class="col-md-8 col-sm-12">
                                    <form method="POST" action="{{ route('let-submit-form') }}">
                                        @csrf
                                        <table class="user-table table-borderless table-responsive card-1 p-4">
                                            <tr>
                                                <td>Disision </td>
                                                <td>
                            @php
                                $divisions = App\Models\Division::all();
                            @endphp
                            <select name="division_id" id="division_id" class="form-control" required>
                                <option value="">Select Division</option>
                                @foreach ($divisions as $division)
                                    <option value="{{ $division->id }}">{{ $division->name }}</option>
                                @endforeach
                            </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Company </td>
                                                <td>
                                                    @php
                                                        $companys = App\Models\Company::all();
                                                    @endphp
                                                    <select name="company_id" id="company_id" class="form-control" required>
                                                        <option value="">Select Company</option>
                                                        @forelse ($companys as $company)
                                                            <option value="{{ $company->id }}">{{ $company->name }}
                                                            </option>
                                                        @empty
                                                            <option value="">No Company</option>
                                                        @endforelse
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>

                                                <td>Department: </td>
                                                <td>
                                                    @php
                                                        $department = App\Models\Department::all();
                                                    @endphp

                                                    <select name="department_id" id="department_id"
                                                        class="form-control" required>
                                                        <option value="">Select Department</option>
                                                        @forelse ($department as $department)
                                                            <option value="{{ $department->id }}">
                                                                {{ $department->name }}
                                                            </option>
                                                        @empty
                                                            <option value="">No Department</option>
                                                        @endforelse

                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Staff Name: </td>
                                                <td>
                                                    {{-- dependable dropdown list of staff names from users table based on the company_id and department_id  --}}
                                                    <select name="user_id" id="user_id" class="form-control" required>
                                                        <option value="">Select Staff</option>
                                                    </select>
                                            </tr>
                                            <tr>
                                                <td>Employee ID: </td>
                                                <td>
                                                    <div id="emp_id">
                                                    </div>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Designation: </td>
                                                <td>
                                                    <div id="designation_id">
                                                    </div>

                                                </td>
                                            </tr>

                                            </tr>
                                            <tr>
                                                <td>Period</td>
                                                <td>
                                                    {{-- radio button for month and year --}}
                                                    {{-- @php
                                                        $current_year = date('Y'); // Get the current year
                                                        $may_1 = strtotime('1 May ' . $current_year); // Get timestamp of 1st May of current year
                                                        $sept_1 = strtotime('1 September ' . $current_year); // Get timestamp of 1st September of current year
                                                        $current_time = time(); // Get current timestamp
                                                        
                                                    @endphp
                                                    @if ($current_time < $may_1)
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio"
                                                                name="kpi_period" id="radio1"
                                                                value="1st Phase, {{ date('Y') }}" checked>
                                                            <label class="form-check-label" for="radio1">
                                                                1st Phase, {{ date('Y') }}
                                                            </label>
                                                        </div>
                                                    @elseif ($current_time < $sept_1)
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio"
                                                                name="kpi_period" id="radio2"
                                                                value="2nd Phase, {{ date('Y') }}">
                                                            <label class="form-check-label" for="radio2">
                                                                2nd Phase, {{ date('Y') }}
                                                            </label>
                                                        </div>
                                                    @else
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio"
                                                                name="kpi_period" id="radio3"
                                                                value="3rd Phase, {{ date('Y') }}">
                                                            <label class="form-check-label" for="radio3">
                                                                3rd Phase, {{ date('Y') }}
                                                            </label>
                                                        </div>
                                                    @endif --}}

                                                       <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="kpi_period"
                                                            id="radio1" value="1st Phase, {{ date('Y') }}">
                                                        <label class="form-check-label" for="radio1">
                                                            1st Phase, {{ date('Y') }}
                                                        </label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="kpi_period"
                                                            id="radio2" value="2nd Phase, {{ date('Y') }}">
                                                        <label class="form-check-label" for="radio2">
                                                            2nd Phase, {{ date('Y') }}
                                                        </label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="kpi_period"
                                                            id="radio3" value="3rd Phase, {{ date('Y') }}">
                                                        <label class="form-check-label" for="radio3">
                                                            3rd Phase, {{ date('Y') }}
                                                        </label>
                                                    </div>
                                                    
                                                </td>
                                            </tr>

                                        </table>
                                </div>
                                <div class="col-md-4 col-sm-12">

                                    <div id="imgofstaff">


                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            {{-- supervisor_assign Table goes here --}}

                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>KRA</th>
                                        <th>KPI</th>
                                        <th>Weight of KPIs</th>
                                        <th>Achievement</th>
                                        <th>Sources of Information</th>
                                        <th>Justification</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <select name="kra[]" id="kra_id" class="form-control kra" required>
                                                <option value="">Select KRA</option>
                                                @foreach ($kras as $kra)
                                                    <option value="{{ $kra->id }}">{{ $kra->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <select name="kpi[]" id="kpi_id" class="form-control kpi" required>
                                                <option value="">Select KPI</option>
                                            </select>
                                        </td>
                                        <td><input type="number" name="weight_of_kpis[]" id="weight_of_kpis"
                                                class="form-control weight_of_kpis" required/></td>
                                        <td><input type="text" name="achivement[]" class="form-control achivement" />
                                        </td>
                                        <td><input type="text" name="sources_of_informations[]"
                                                class="form-control sources_of_informations" /></td>
                                        <td><input type="text" name="justification[]"
                                                class="form-control justification" /></td>
                                    </tr>

                                </tbody>
                                {{-- <div>
                                            <tr>
                                                <td>Staff Supervision & Development</td>
                                                <td>
                                            <tr>
                                                <td>Late Percentage (in days)</td>
                                                <td>Carries out all activities with honesty, transparency and satisfactory communication skills (for example - no. of task accomplish within the deadline)</td>
                                                <td>Represents proactiveness, team work and leadership capabilities (assist supervisor to achieve departmental goals)</td>
                                                <td>Take an active role in sharing & implement new innovative ideas (for example - no. of new idea generation with proper judgement)</td>
                                            </tr>
                                        </td>

                                            <tr>
                                    </div> --}}
                            </table>
                            {{-- <button type="submit" class="btn btn-primary">Submit</button> --}}
                            <x-backend.form.saveButton>Save</x-backend.form.saveButton>
                            </form>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->


                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#division_id').on('change', function() {
                var divisionId = $(this).val();

                if (divisionId) {
                    $.ajax({
                        url: '/get-company-designation/' + divisionId,
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            console.log(data);
                            const companySelect = $('#company_id');
                            // const designationSelect = $('#designation_id');

                            companySelect.empty();
                            companySelect.append('<option value="">Select Company</option>');
                            $.each(data.company, function(index, company) {
                                companySelect.append(
                                    `<option value="${company.id}">${company.name}</option>`
                                );
                            });

                            // designationSelect.empty();
                            // designationSelect.append(
                            //     '<option value="">Select Designation</option>');
                            // $.each(data.designations, function(index, designation) {
                            //     designationSelect.append(
                            //         `<option value="${designation.id}">${designation.name}</option>`
                            //     );
                            // });
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        }
                    });
                } else {
                    alert('Select a division first for company and designation name.');
                }
            });
        });

        $(document).ready(function() {
            $('#company_id').on('change', function() {
                var company_id = $(this).val();

                if (company_id) {
                    $.ajax({
                        url: '/get-department/' + company_id,
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            console.log(data);
                            const companySelect = $('#department_id');

                            companySelect.empty();
                            companySelect.append('<option value="">Select Department</option>');
                            $.each(data.departments, function(index, departments) {
                                companySelect.append(
                                    `<option value="${departments.id}">${departments.name}</option>`
                                );
                            });
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        }
                    });
                } else {
                    alert('Select a Company first for Department name.');
                }
            });
        }); 
        $(document).ready(function() {
            $('#company_id').change(function() {
                var company_id = $(this).val();
                $('#department_id').change(function() {
                    var department_id = $(this).val();
                    $.ajax({
                        url: "{{ route('getstaff') }}",
                        method: "GET",
                        data: {
                            company_id: company_id,
                            department_id: department_id
                        },
                        success: function(data) {
                            // console.log(data);
                            $('#user_id').empty();
                            $('#user_id').append(
                                '<option value="">Select Staff</option>');
                            $.each(data, function(key, value) {
                                $('#user_id').append('<option value="' + value
                                    .id + '">' + value.name + '</option>');
                            });
                        }
                    });
                });
            });
        });


        $(document).ready(function() {
            $('#user_id').on('change', function() {
                var user_id = $(this).val();
                if (user_id) {
                    $.ajax({
                        url: "{{ url('/get-staff-details/') }}/" +
                            user_id,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            // console.log(data);
                            $('#designation_id').empty();
                            $('#imgofstaff').empty();
                            $('#emp_id').empty();
                            $('#designation_id').append(data.designation_id);
                            $('#emp_id').append(data.emp_id);
                            $('#imgofstaff').append(
                                '<img src="{{ asset('images/users/') }}/' +
                                data.picture +
                                '"alt="user image" class="img-thumbnail" width="200px" height="200px" />'
                            );

                        }
                    });
                } else {
                    alert('Select any Employee to upload Data ')
                }
            });
        });


        $(document).ready(function() {
            $('#weight_of_kpis').on('keyup', function() {
                var weight_of_kpis = $(this).val();
                if (weight_of_kpis >= 4) {
                    alert('Weight of KPIs should not be greater than 3');
                    $(this).val('');
                }
            });
        })


        $(document).ready(function() {
            // Bind an event handler to the KRA dropdown when its value is changed
            $(document).on('change', '.kra', function() {
                var kra_id = $(this).val(); // Get the selected KRA ID
                var kpi_dropdown = $(this).closest('tr').find(
                    '.kpi'); // Get the KPI dropdown in the same row as the KRA dropdown

                // Send an AJAX request to get the KPI options for the selected KRA
                $.ajax({
                    url: '{{ route('getKPIforletentry') }}',
                    type: 'GET',
                    data: {
                        kra_id: kra_id
                    },
                    dataType: 'json',
                    success: function(data) {
                        // Remove all existing KPI options and add the new options
                        kpi_dropdown.empty();
                        kpi_dropdown.append('<option value="">Select KPI</option>');
                        $.each(data, function(index, kpi) {
                            kpi_dropdown.append('<option value="' + kpi.id + '">' + kpi
                                .name + '</option>');
                        });
                    }
                });
            });
        });
    </script>





</x-backend.layouts.master>