@extends('layouts.appv2')


@section('content')

    {{-- table index start --}}
    <div class="row-sm-12">
            <div class="card" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center mb-0">
                        <h5>EDIT USER INFO</h5>
                        <div class="btn-toolbar mb-2 mb-md-0">
                            <a href="{{ route('admins.employees')}}" class="btn btn-sm btn-secondary mt-1 mb-1" style="width:70px; text-align: center; border-radius: 50px;">
                                Back
                            </a>
                        </div>
                    </div> 
                </div>


                <div class="card-body">

                    @if ($message = Session::get('success'))
                        <div class="alert alert-success" role="alert">
                            {{ $message }}
                        </div>
                    @endif

                    @if ($message = Session::get('error'))
                        <div class="alert alert-danger" role="alert">
                            {{ $message }}
                        </div>
                    @endif

                    @if ($errors->any())
                        <div class="alert alert-danger" role="alert">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif


                    {{-- --------------------------------------------------------------------------- --}}
                    <form action="{{ route('employees.saveeditemployee', $employees->employee_id) }}" method="POST">
                        @csrf
                        <h4 class = "pb-4 pt-2">Personal Data Information</h4>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="name">Salutation</label>
                                    <select type="text" name="employee_salutation" class="form-control" style="border-radius: 10px;">
                                            <option value="">{{ $employees->employee_salutation ?? 'N/A' }}</option>
                                            <option value="DATO'">DATO'</option>
                                            <option value="Tuan">Tuan</option>
                                            <option value="Puan">Puan</option>
                                            <option value="Encik">Encik</option>
                                    </select>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="name">Mobile Number</label>
                                    <input type="text" name="employee_mobile" class="form-control" style="border-radius: 10px;"  value="{{ $employees->employee_mobile ?? 'N/A' }}">
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="name">Name</label>
                                    <input type="text" name="employee_first_name" class="form-control" id="employee_first_name" style="border-radius: 10px;" value="{{ $employees->employee_first_name ?? 'N/A' }}">
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="name">Birthdate</label>
                                    <div class="form-line">
                                        <input type="date" class="form-control" id="employee_dob" name="employee_dob" style="border-radius: 10px;" value="employee_dob" placeholder="##/#/####">                                                        
                                    </div>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="status">Status</label>
                                    <button class="btn btn-sm btn-link" type="button" id="changeStatusButton">
                                        Change
                                    </button>
                                    <input type="text" name="active" class="form-control" style="border-radius: 10px;" id="statusInput" placeholder="{{ $employees->user->active == 1 ? 'Employed' : 'Unemployed' }}" value="" readonly>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="name">Email</label>
                                    <button class="btn btn-sm btn-link" type="button" id="" data-toggle="modal" data-target="#changeemployed">ㅤ</button>
                                    <input type="text" name="employee_email" class="form-control" style="border-radius: 10px;" id="employee_email" placeholder="New Email" value="{{ $employees->employee_email ?? 'N/A' }}">
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="name">MyKAD / Passport No</label>
                                    <input type="text" name="employee_ic_no" class="form-control" style="border-radius: 10px;" value="{{ $employees->employee_ic_no ?? 'N/A' }}">
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="name">Personal Email</label>
                                    <input type="text" name="employee_alt_email" class="form-control"  style="border-radius: 10px;" placeholder="New Personal Email" value="{{ $employees->employee_alt_email ?? 'N/A' }}">
                                </div>
                            </div>
                        <hr>

                        <h4 class = "pb-4 pt-2">Employment Information</h4>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="employee_no">Employee No.</label>
                                <input type="text" name="employee_no" class="form-control" id="employee_no" 
                                    style="border-radius: 10px;" placeholder="New Employee No." value="{{ $employees->employee_no }}">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="">Employee Designation</label>
                                <select type="text" name="employee_designation" class="form-control" style="border-radius: 10px;">
                                    <option value="">{{ $employees->designation->designation_name ?? 'N/A' }}</option>
                                    @foreach($designation as $designation)
                                    <option value="{{ $designation->designation_id }}">{{ $designation->designation_name ?? 'N/A' }}</option>
                                    @endforeach                                                         
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="reportType">Company</label>
                                <select name="employee_company_id" class="form-control" style="border-radius: 10px;">
                                    <option value="">{{ $employees->company->company_name ?? 'N/A' }}</option>
                                    @foreach($companies as $company)
                                    <option value="{{ $company->company_id }}">{{ $company->company_name ?? 'N/A' }}</option>
                                    @endforeach                                                             
                                </select>
                            </div>

                            <div class="form-group col-md-6">
                                <label for="reportType">Office</label>
                                <select name="employee_office_id" class="form-control" style="border-radius: 10px;">
                                    <option value="">{{ $employees->office->office_name ?? 'N/A' }}</option>
                                    @foreach($offices as $office)
                                    <option value="{{ $office->office_id }}">{{ $office->office_name ?? 'N/A' }}</option>
                                    @endforeach                                                          
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="reportType" >Department</label>
                                <select name="employee_department_id"   class="form-control" style="border-radius: 10px;">
                                    <option value="">{{ $employees->department->department_name ?? 'N/A' }}</option>
                                    @foreach($departments as $department)
                                    <option value="{{ $department->department_id }}">{{ $department->department_name ?? 'N/A' }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group col-md-6">
                                <label for="reportType">Unit</label>
                                <select name="employee_unit_id" class="form-control" style="border-radius: 10px;">
                                @foreach($units as $unit)
                                    <option value="{{ $unit->unit_id }}">{{ $unit->unit_name ?? 'N/A' }}</option>
                                @endforeach                                                       
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="reportType">Grade</label>
                                <select name="employee_grade_id" class="form-control" style="border-radius: 10px;">
                                    <option value="">{{ $employees->grade->grade_name ?? 'N/A' }}</option>
                                    @foreach($grades as $grades)
                                    <option value="{{ $grades->grade_id }}">{{ $grades->grade_name ?? 'N/A' }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group col-md-6">
                                <label for="reportType">Employment Type</label>
                                <select name="employee_emptype_id" class="form-control" style="border-radius: 10px;">
                                    <option value="">{{ $employees->emptype->emptype_name ?? 'N/A' }}</option>
                                    @foreach($types as $type)
                                    <option value="{{ $type->emptype_id }}">{{ $type->emptype_name ?? 'N/A' }}</option>
                                    @endforeach                                                          
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="name">Joined Date</label>
                                <div class="form-line">
                                    <input type="date" class="form-control" id="" name="employee_joined_at" style="border-radius: 10px;" value="{{ $employees->employee_joined_at }}" placeholder="##/#/####">                                                        
                                </div>
                            </div>

                            <div class="form-group col-md-6">
                                <label for="name">Resigned Date</label>
                                <div class="form-line">
                                    <input type="date" class="form-control" id="resignedDateInput" name="employee_resigned_at" 
                                        style="border-radius: 10px;" 
                                        value="{{ $employees->employee_resigned_at }}" 
                                        placeholder="##/#/####"
                                        {{ $employees->user->active == 1 ? 'disabled' : '' }}>
                                </div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="">Set as Approver</label>
                                <select name="user_is_approver" class="form-control"style="border-radius: 10px;">
                                    <option value="">NO</option>
                                    <option value="1">YES</option>
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="name">Set as HOU/HOD</label>
                                <select id="hou_hod_select" class="form-control" style="border-radius: 10px;">
                                    <option value="none" selected>None</option>
                                    <option value="HOU">HOU</option>
                                    <option value="HOD">HOD</option>
                                </select>
                            </div>

                            <input type="hidden" id="employee_is_hou" name="employee_is_hou" value="0">
                            <input type="hidden" id="employee_is_hod" name="employee_is_hod" value="0">
                        </div>

                        <div class="form-row">
                            @if($employees->emptype->emptype_id !== 1)
                                <div class="form-group col-md-6 d-flex align-items-end">
                                    <div style="flex: 1;">
                                        <label for="contract_no">Contract No.</label>
                                        <input type="text" name="contract_no" class="form-control" id="contract_no" 
                                            style="border-radius: 10px;" 
                                            placeholder="Contract No." 
                                            value="{{ $employees->contract_no }}">
                                    </div>
                                    <a href="{{ route('employees.contractdetail', $employees->employee_id) }}" class="btn btn-info ml-2" style="border-radius: 10px;">
                                        Renew Contract
                                    </a>
                                </div>
                            @endif
                        </div>
                        <hr>
                        <button type="submit" class="btn btn-primary" style="border-radius: 10px;">Update</button>
                    </form>
                    {{----------------------}}
                </div>
            </div>

            <form action="{{ route('employees.saveeditemployee', $employees->employee_id) }}" method="POST">
                @csrf
                <div class="card" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
                    <div class="card-body">
                        <h4 class = "pb-4 pt-2">Login Information</h4>
                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label for="username">Username</label>
                                <input type="text" name="userlogin" class="form-control" style="border-radius: 10px;" id="username" value="{{ $employees->user->userlogin ?? 'N/A' }}" value="">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label for="password">{{ __('Password') }}</label>
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" value="{{ $employees->user->password }}" style="border-radius: 10px;" name="password" required autocomplete="new-password">

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label for="password-confirm">{{ __('Confirm Password') }}</label>
                                <input id="password-confirm" type="password" class="form-control" style="border-radius: 10px;" name="password_confirmation" required autocomplete="new-password">
                            </div>
                        </div>
                        <hr>
                        <button type="submit" class="btn btn-primary" style="border-radius: 10px;">Update</button>
                    </div>
                </div>
            </form>

            <form action="{{ route('employees.saveeditemployee', $employees->employee_id) }}" method="POST">
                @csrf
                <div class="card" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
                    <div class="card-body">
                        <h4 class = "pb-4 pt-2">Attendance Information</h4>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="working_hours">Working Hours</label>
                                <select name="working_hours" id="working_hours" class="form-control" style="border-radius: 10px;">
                                    <option value="">{{$employees->workhours->time_schedule_name?? 'N/A' }}</option>
                                </select>
                            </div>

                            <div class="form-group col-md-6">
                                <label for="flexible_time">Flexible Time</label>
                                <select name="employee_time_flexibility" id="flexible_time" class="form-control" style="border-radius: 10px;">
                                    <option value="">Select Yes/No</option>
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                </select>
                            </div>

                            <div class="form-group col-md-6">
                                <label for="flexible_hours">Flexible Working Hours<small class="text-danger d-block">*Please include the normal working hours</small>
                                </label>
                                <select name="employees_schedule_time_schedule_id[]" id="flexible_hours" class="form-control" style="border-radius: 10px;" multiple disabled>
                                    @foreach($workhours as $workhour)
                                        <option value="{{ $workhour->time_schedule_id }}">{{ $workhour->time_schedule_name ?? 'N/A' }}</option>
                                    @endforeach
                                </select>

                            </div>

                            <div class="form-group col-md-6">
                                <label for="flexible_limit">Flexible Limit<small class="text-danger d-block">*Not above 31 days</small>
                                </label>
                                <input type="text" name="employee_flex_limit" class="form-control" id="flexible_limit" placeholder="Enter limit" style="border-radius: 10px;" value="{{ $employees->employee_flex_limit ?? '' }}" disabled>
                            </div>
                        </div>
                        <hr>
                        <button type="submit" class="btn btn-primary" style="border-radius: 10px;">Update</button>
                    </div>
                </div>
                
                <div class="card" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
                    <div class="card-body">
                        <h4 class = "pb-4 pt-2">Leaves Approver / Verifiers</h4>
                        <div class="form-row">
                            <div class="form-group col-md-6 d-flex align-items-end">
                                <div style="flex: 1;">
                                    <label for="">Approver</label>
                                    <input type="text" name="" class="form-control" id="" 
                                        style="border-radius: 10px;" 
                                        placeholder="" 
                                        value="{{ $approver->employee_first_name ?? 'N/A' }}" readonly>
                                </div>
                            </div>
                        
                            <div class="form-group col-md-6 d-flex align-items-end">
                                <div style="flex: 1;">
                                    <label for="">Verifier</label>
                                    <input type="text" name="" class="form-control" id="" 
                                        style="border-radius: 10px;" 
                                        placeholder="" 
                                        value="{{ $verifier ?? 'N/A' }}" readonly>
                                </div>
                                <a href="{{ route('employees.setapprover', $employees->employee_id)}}" class="btn btn-info ml-2" style="border-radius: 10px;">
                                    SET VERIFIER/APPROVER
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
                    <div class="card-body">
                        <h4 class="pb-4 pt-2">Leaves Entitled</h4>
                        <div class="form-row">
                            <!-- AL Entitled -->
                            <div class="form-group col-md-4 d-flex align-items-end">
                                <div style="flex: 1;">
                                    <label for="leaves_title">AL Entitled</label>
                                    <input type="text" name="AL_Entitled" class="form-control" 
                                        style="border-radius: 10px;" 
                                        value="{{ $employees->leaveEntitled->AL ?? 'N/A' }}" readonly>
                                </div>
                            </div>

                            <!-- EL Entitled -->
                            <div class="form-group col-md-4 d-flex align-items-end">
                                <div style="flex: 1;">
                                    <label for="leaves_title">EL Entitled</label>
                                    <input type="text" name="EL_Entitled" class="form-control" 
                                        style="border-radius: 10px;" 
                                        value="{{ $employees->leaveEntitled->EL ?? 'N/A' }}" readonly>
                                </div>
                            </div>

                            <!-- ML Entitled -->
                            <div class="form-group col-md-4 d-flex align-items-end">
                                <div style="flex: 1;">
                                    <label for="leaves_title">ML Entitled</label>
                                    <input type="text" name="ML_Entitled" class="form-control" 
                                        style="border-radius: 10px;" 
                                        value="{{ $employees->leaveEntitled->ML ?? 'N/A' }}" readonly>
                                </div>
                            </div>
                        </div>

                        <div class="form-row">
                            <!-- RL Entitled -->
                            <div class="form-group col-md-4 d-flex align-items-end">
                                <div style="flex: 1;">
                                    <label for="leaves_title">RL Entitled</label>
                                    <input type="text" name="RL_Entitled" class="form-control" 
                                        style="border-radius: 10px;" 
                                        value="{{ $employees->RL ?? 'N/A' }}" readonly>
                                </div>
                            </div>

                            <!-- Carried Forward -->
                            <div class="form-group col-md-4 d-flex align-items-end">
                                <div style="flex: 1;">
                                    <label for="leaves_title">Carried Forward</label>
                                    <input type="text" name="CarriedForward" class="form-control" 
                                        style="border-radius: 10px;" 
                                        value="" readonly>
                                </div>
                            </div>

                            <!-- Total AL Entitled -->
                            <div class="form-group col-md-4 d-flex align-items-end">
                                <div style="flex: 1;">
                                <a href="{{ route('admins.editleavestaff', $employees->employee_id) }}" class="btn btn-info" style="border-radius: 10px;">CHANGE LEAVE DETAILS</a>

                                </div>
                            </div>
                        </div>

                        <!-- <div class="form-row">
                            <div class="col-sm-12 d-flex justify-content-start">
                                <a href="{{ route('admins.editleavestaff', $employees->employee_id) }}" class="btn btn-info ml-2" style="border-radius: 10px;">CHANGE LEAVE DETAILS</a>
                            </div>
                        </div> -->
                    </div>
                </div>
            </form>
        {{-- table index end --}}

    <script>
        $(document).ready(function () {
            $('#flexible_hours').select2({
                placeholder: "Select Flexible Working Hours",
                allowClear: true
            });
        });
    </script>

    <script>
        const selectElement = document.getElementById('hou_hod_select');
        const isHOUInput = document.getElementById('employee_is_hou');
        const isHODInput = document.getElementById('employee_is_hod');

        selectElement.addEventListener('change', function () {
            const selectedValue = this.value;

            if (selectedValue === 'HOU') {
                isHOUInput.value = '1'; // Set HOU as 1
                isHODInput.value = '0'; // Reset HOD to 0
            } else if (selectedValue === 'HOD') {
                isHOUInput.value = '0'; // Reset HOU to 0
                isHODInput.value = '1'; // Set HOD as 1
            } else {
                isHOUInput.value = '0'; // Reset both for "None"
                isHODInput.value = '0';
            }
        });
    </script>
    
    <script>
        document.getElementById('changeStatusButton').addEventListener('click', function () {
            const statusInput = document.getElementById('statusInput');
            const resignedDateInput = document.getElementById('resignedDateInput');

            if (statusInput.placeholder === 'Employed') {
                statusInput.placeholder = 'Unemployed';
                statusInput.value = 'Unemployed';
                resignedDateInput.disabled = false; // Disable date input
                
                let hiddenInput = document.getElementById('activeStatusHidden');
                if (!hiddenInput) {
                    hiddenInput = document.createElement('input');
                    hiddenInput.type = 'hidden';
                    hiddenInput.id = 'activeStatusHidden';
                    hiddenInput.name = 'active';
                    statusInput.form.appendChild(hiddenInput);
                }
                hiddenInput.value = '0'; // Unemployed
            } else if(statusInput.placeholder === 'Unemployed'){
                statusInput.placeholder = 'Employed';
                statusInput.value = 'Employed';
                resignedDateInput.disabled = true; // Enable date input
                
                let hiddenInput = document.getElementById('activeStatusHidden');
                if (!hiddenInput) {
                    hiddenInput = document.createElement('input');
                    hiddenInput.type = 'hidden';
                    hiddenInput.id = 'activeStatusHidden';
                    hiddenInput.name = 'active';
                    statusInput.form.appendChild(hiddenInput);
                }
                hiddenInput.value = '1'; // Employed
            }

        });
    </script> 

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const flexibleTime = document.getElementById('flexible_time');
            const flexibleHours = document.getElementById('flexible_hours');
            const flexibleLimit = document.getElementById('flexible_limit');

            // Function to toggle enabled/disabled state
            function toggleFlexibleFields() {
                if (flexibleTime.value === '1') { // Yes selected
                    flexibleHours.disabled = false;
                    flexibleLimit.disabled = false;
                } else { // No or nothing selected
                    flexibleHours.disabled = true;
                    flexibleLimit.disabled = true;
                    flexibleHours.value = ''; // Clear selections
                    flexibleLimit.value = ''; // Clear input
                }
            }

            // Add event listener for Flexible Time change
            flexibleTime.addEventListener('change', toggleFlexibleFields);
        });
    </script>
@endsection