@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-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

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




                                            {{-- --------------------------------------------------------------------------- --}}
                                <form action="{{ route('employees.storeemployee')}}" method="POST">
                                                @csrf


                                                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 mb-4">
                                                    <h3>Add Employee</h3> 
                                                    <div class="btn-toolbar mb-2 mb-md-0">
                                                        <div class="btn-group mr-2">
                                                            <button type="submit" class="btn btn-sm btn-outline-primary" name="save">
                                                                <i class="fa-regular fa-circle-check"></i>                                                                
                                                                Save
                                                            </button>
                                                        </div>
                                                        <div class="btn-group mr-2">
                                                            <a href="{{ route('admins.employees') }}" class="btn btn-sm btn-outline-secondary">
                                                                <i class="fas fa-times"></i>
                                                                Cancel
                                                            </a>
                                                        </div>
                                                        <div class="btn-group mr-2">
                                                            <button type="reset" class="btn btn-sm btn-outline-info" name="reset">
                                                                Reset
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>


                                                <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="">New Salutation</option>
                                                                <option value="DATO'">DATO'</option>
                                                                <option value="Tuan">Tuan</option>
                                                                <option value="Puan">Puan</option>
                                                                <option value="Encik">Encik</option>
                                                                <option value="Miss">Miss</option>
                                                        </select>
                                                    </div>

                                                    <div class="form-group col-md-6">
                                                        <label for="name">Mobile Number<span style="color: red;">*</span></label>
                                                        <input type="text" name="employee_mobile" class="form-control" id="name" placeholder="New Phone Number" value="" style="border-radius: 10px;" required>
                                                    </div>

                                                </div>

                                                <div class="form-row">
                                                    <div class="form-group col-md-6">
                                                        <label for="name">Email<span style="color: red;">*</span></label>
                                                        <input type="text" name="employee_email" class="form-control" id="name" placeholder="New Email" value="" style="border-radius: 10px;" required>
                                                    </div>

                                                    <div class="form-group col-md-6">
                                                            <label for="name">Birthdate</label>
                                                            <button class="btn btn-sm btn-link" type="button" id="changeemployedbutton" data-toggle="modal" data-target="#changeemployed"></button>
                                                            <div class="form-line">
                                                                <input type="date" class="form-control" id="" name="employee_dob" value="" placeholder="##/#/####" style="border-radius: 10px;">                                                        
                                                            </div>
                                                        </div>
                                                </div>

                                                <div class="form-row">
                                                    <div class="form-group col-md-6">
                                                        <label for="name">First Name<span style="color: red;">*</span></label>
                                                        <input type="text" name="employee_first_name" class="form-control" id="name" placeholder="New Name" value="" style="border-radius: 10px;" required>
                                                    </div>
                                                    <div class="form-group col-md-2">
                                                        <label for="reportType">Middle Name<span style="color: red;">*</span></label>
                                                            <select name="employee_mid_name" class="form-control" placeholder="BIN / BINTI" style="border-radius: 10px;" required>
                                                                <option value="BIN">BIN</option>
                                                                <option value="BINTI">BINTI</option>
                                                            </select>
                                                    </div>
                                                    <div class="form-group col-md-4">
                                                        <label for="name">Last Name<span style="color: red;">*</span></label>
                                                        <input type="text" name="employee_last_name" class="form-control" id="name" placeholder="New Last Name" value=""style="border-radius: 10px;" required>
                                                    </div>
                                                </div>

                                                <div class="form-row">
                                                    <div class="form-group col-md-6">
                                                        <label for="name">MyKAD / Passport No<span style="color: red;">*</span></label>
                                                        <input type="text" name="employee_ic_no" class="form-control"id="name" placeholder=" No. MyKAD" value=""style="border-radius: 10px;" required>
                                                    </div>

                                                    <div class="form-group col-md-6">
                                                        <label for="name">Personal Email</label>
                                                        <input type="text" name="employee_alt_email" class="form-control" id="name" placeholder="New Personal Email" style="border-radius: 10px;"value="">
                                                    </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="name">Employee No.</label>
                                                        <input type="text" name="employee_no" class="form-control" id="name" placeholder="New Employee No." value="" style="border-radius: 10px;" required>
                                                    </div>


                                                    <div class="form-group col-md-6">
                                                        <label for="">Employee Designation<span style="color: red;">*</span></label>
                                                        <select type="text" name="employee_designation" class="form-control" style="border-radius: 10px;" required>
                                                            <option value="">Select Designation</option>
                                                                @foreach($designation as $designation)
                                                                <option value="{{ $designation->designation_id }}">{{ $designation->designation_name }}</option>
                                                                @endforeach 
                                                        </select>
                                                    </div>
                                                    
                                                </div>

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

                                                    <div class="form-group col-md-6">
                                                        <label for="reportType">Office<span style="color: red;">*</span></label>
                                                            <select name="employee_office_id" class="form-control"style="border-radius: 10px;" required>
                                                                <option value="">Select Office</option>
                                                                @foreach($offices as $office)
                                                                <option value="{{ $office->office_id }}">{{ $office->office_name }}</option>
                                                                @endforeach 
                                                            </select>
                                                    </div>
                                                </div>

                                                <div class="form-row">
                                                    <div class="form-group col-md-6">
                                                        <label for="employee_department_id">Department<span style="color: red;">*</span></label>
                                                        <select name="employee_department_id" id="departmentDropdown" class="form-control"style="border-radius: 10px;" required>
                                                            <option value="">Select Department</option>
                                                            @foreach($departments as $department)
                                                                <option value="{{ $department->department_id }}">{{ $department->department_name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div class="form-group col-md-6">
                                                        <label for="employee_unit_id">Unit<span style="color: red;">*</span></label>
                                                        <select name="employee_unit_id" id="unitDropdown" class="form-control" style="border-radius: 10px;"disabled required>
                                                            <option value="">Select Unit</option>
                                                        </select>
                                                    </div>
                                                </div>



                                                <div class="form-row">
                                                    <div class="form-group col-md-6">
                                                        <label for="reportType">Grade<span style="color: red;">*</span></label>
                                                            <select name="employee_grade_id" class="form-control"style="border-radius: 10px;" required>
                                                                <option value="">Select Grade</option>
                                                                @foreach($grades as $grades)
                                                                <option value="{{ $grades->grade_id }}">{{ $grades->grade_name }}</option>
                                                                @endforeach
                                                            </select>
                                                    </div>

                                                    <div class="form-group col-md-6">
                                                        <label for="reportType">Employment Type<span style="color: red;">*</span></label>
                                                            <select name="employee_emptype_id" class="form-control"style="border-radius: 10px;" required> 
                                                                <option value="">Select Type</option>
                                                                @foreach($types as $type)
                                                                <option value="{{ $type->emptype_id }}">{{ $type->emptype_name }}</option>
                                                                @endforeach
                                                            </select>
                                                    </div>
                                                </div>


                                                <div class="form-row">
                                                    
                                                
                                                    <div class="form-group col-md-6">
                                                            <label for="name">Joined Date<span style="color: red;">*</span></label>
                                                            <div class="form-line">
                                                                <input type="date" class="form-control" id="" name="employee_joined_at" value="" placeholder="##/#/####"style="border-radius: 10px;" required>                                                        
                                                            </div>
                                                    </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>

                                                    <!-- Hidden inputs to store the values -->
                                                    <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">
                                                  
                                                    <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="">User Access</label>
                                                            <select name="type" class="form-control"style="border-radius: 10px;">
                                                                <option value="2">USER</option>
                                                                <option value="1">ADMIN</option>
                                                            </select>
                                                    </div>
                                                </div>

                                        
                                            {{-------------------- --}}
                                        </div>



                                    </div>


                                    <div class="row">
                                        <div class="col-md-6">
                                            <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="userlogin">Username<span style="color: red;">*</span></label>
                                                            <input name="userlogin" type="text" class="form-control form-control-user @error('userlogin') is-invalid @enderror" id="exampleInputName" placeholder="Login Name"style="border-radius: 10px;" required>
                                                        </div>
                                                    </div>

                                                    <div class="form-row">
                                                        <div class="form-group col-md-12">
                                                            <label for="password">{{ __('Password') }}<span style="color: red;">*</span></label>
                                                            <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password"style="border-radius: 10px;" required>

                                                            @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') }}<span style="color: red;">*</span></label>
                                                            <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password"style="border-radius: 10px;" required>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <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-12">
                                                        <label for="">Working Hours</label>
                                                        <select name="employee_time_schedule" class="form-control" style="border-radius: 10px;" required>
                                                            <option value="" disabled>Select Time</option>
                                                            @foreach($workhours as $workhour) 
                                                                <option value="{{ $workhour->time_schedule_id }}">{{ $workhour->time_schedule_name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>


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


                            </div>
                            {{-- table index end --}}

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const units = @json($units); // All units data as a JavaScript object
        const departmentDropdown = document.getElementById('departmentDropdown');
        const unitDropdown = document.getElementById('unitDropdown');

        departmentDropdown.addEventListener('change', function () {
            const departmentId = this.value;

            // Clear the unit dropdown
            unitDropdown.innerHTML = '<option value="">Select Unit</option>';
            unitDropdown.disabled = true;

            if (departmentId) {
                // Filter units based on the selected department
                const filteredUnits = units.filter(unit => unit.unit_department_id == departmentId);
                
                if (filteredUnits.length > 0) {
                    filteredUnits.forEach(unit => {
                        const option = document.createElement('option');
                        option.value = unit.unit_id;
                        option.textContent = unit.unit_name;
                        unitDropdown.appendChild(option);
                    });
                    unitDropdown.disabled = false;
                }
            }
        });
    });
</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 = 'null'; // Reset both for "None"
            isHODInput.value = 'null';
        }
    });
</script>


@endsection