@extends('layouts.content')
@section('body_content')
    <main>
        <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
            <div class="container-xl px-4">
                <div class="page-header-content">
                    <div class="row align-items-center justify-content-between pt-3">
                        <div class="col-auto mb-3">
                            <h1 class="page-header-title">
                                <div class="page-header-icon"><i data-feather="user-plus"></i></div>
                                Add User
                            </h1>
                        </div>
                        <div class="col-12 col-xl-auto mb-3">
                            <a class="btn btn-sm btn-light text-primary" href="/user">
                                <i class="me-1" data-feather="arrow-left"></i>
                                Back to Employee List
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- Main page content-->
        <div class="container-xl px-4 mt-4">
            <form action="/user" method="post" autocomplete="off" id="add_employee_form" enctype="multipart/form-data">
                <div class="row">
                    @csrf
                    <div class="col-xl-4">
                        <!-- Profile picture card-->
                        <div class="card mb-4 mb-xl-0">
                            <div class="card-header">Profile Picture</div>
                            <div class="card-body text-center">
                                <!-- Profile picture image-->
                                <img class="img-account-profile rounded-circle mb-2" src="/images/1688703810_profile-1.png"
                                    id="profileImage" alt="Profile Image" />
                                <!-- Profile picture help block-->
                                <div class="small font-italic text-muted mb-4">JPG or PNG no larger than 2 MB</div>
                                <!-- File input and Profile picture upload button-->
                                <input type="file" id="imageUpload" accept="image/*" name="image"
                                    style="display: none;" onchange="uploadImage()" />
                                <button class="btn btn-primary" type="button"
                                    onclick="document.getElementById('imageUpload').click();">
                                    Upload image
                                </button>
                            </div>
                        </div>

                        <button class="btn btn-primary w-100 my-3" type="submit" id="saveChangesButton" disabled
                            readonly>Create
                            Employee</button>

                        <div class="card mb-4" id="masterNonShift">

                        </div>
                    </div>
                    <div class="col-xl-8">
                        <!-- Account details card-->
                        <div class="card mb-4">
                            <div class="card-header">Personal Information</div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-6 mb-3">
                                        <label>Name <span style="color: red">*</span></label>
                                        <input type="text" class="form-control" id="add_employee_name" placeholder="Name"
                                            name="name" value="{{ old('name') }}" maxlength="255" required>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Personal Identity Number <span style="color: red">*</span></label>
                                        <input type="number" class="form-control" id="add_employee_pid"
                                            placeholder="Personal Identity Number" name="pid"
                                            value="{{ old('pid') }}" maxlength="16"
                                            oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                                            required>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Family Card Number <span style="color: red">*</span></label>
                                        <input type="number" class="form-control" id="add_employe_family_card_no"
                                            placeholder="Family Card Number" name="family_card_no"
                                            value="{{ old('family_card_no') }}" maxlength="16"
                                            oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                                            required>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Employee Number</label>
                                        <input type="number" class="form-control" id="add_employee_employee_no"
                                            placeholder="Employee Number" name="employee_no"
                                            value="{{ old('employee_no') }}">
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Phone Number <span style="color: red">*</span></label>
                                        <div class="input-group flex-nowrap">
                                            <span class="input-group-text" id="addon-wrapping">+62</span>
                                            <input type="number" class="form-control" id="add_phone_number"
                                                placeholder="83109876709" name="phone_number"
                                                value="{{ old('phone_number') }}"maxlength="14" aria-label="phone_number"
                                                aria-describedby="addon-wrapping"
                                                oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                                                required>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Gender</label>
                                        <select class="form-control selectpicker" id="add_employee_gender" name="gender">
                                            <option value="">Choose Gender...</option>
                                            <option value="Male">Male</option>
                                            <option value="Female">Female</option>
                                        </select>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Place Of Birthday <span style="color: red">*</span></label>
                                        <input type="text" class="form-control" id="add_employe_pob"
                                            placeholder="Place of Birthday" name="pob" value="{{ old('pob') }}"
                                            maxlength="255" required>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Birthday <span style="color: red">*</span></label>
                                        <input type="date" class="form-control " id="add_employee_birthday"
                                            placeholder="Birthday" name="birthday" value="{{ old('birthday') }}"
                                            maxlength="255" required>
                                    </div>
                                    <div class="col-12 mb-3">
                                        <label>Address KTP</label>
                                        <input type="text" class="form-control" id="add_employee_address"
                                            placeholder="St. name, House no., etc" name="address"
                                            value="{{ old('address') }}" maxlength="255">
                                    </div>
                                    <div class="col-12 mb-3">
                                        <label>Current Address</label>
                                        <input type="text" class="form-control" id="add_employee_address_current"
                                            placeholder="St. name, House no., etc" name="address_current"
                                            value="{{ old('address_current') }}" maxlength="255">
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>BPJS K</label>
                                        <input type="text" class="form-control" id="add_employe_bpjsk_no"
                                            placeholder="BPJS K" name="bpjsk_no" value="{{ old('bpjsk_no') }}">
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>BPJS TK</label>
                                        <input type="text" class="form-control" id="add_employee_bpjstk_no"
                                            placeholder="BPJS TK" name="bpjstk_no" value="{{ old('bpjstk_no') }}">
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>NPWP</label>
                                        <input type="text" class="form-control" id="npwp_no" placeholder="NPWP"
                                            name="npwp_no" value="{{ old('npwp_no') }}" maxlength="20"
                                            oninput="if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Religion</label>
                                        <select class="form-control selectpicker" id="add_employee_religion"
                                            name="religion">
                                            <option value="" selected>Choose Religion...</option>
                                            <option value="Islam">Islam</option>
                                            <option value="Kristen">Kristen</option>
                                            <option value="Hindu">Hindu</option>
                                            <option value="Budha">Budha</option>
                                            <option value="Khatolik">Khatolik</option>
                                        </select>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Major</label>
                                        <input type="text" class="form-control" id="add_employe_major"
                                            placeholder="Informatic" name="major" value="{{ old('major') }}">
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Bachelor Degree</label>
                                        <input type="text" class="form-control" id="add_employee_bachelor_degree"
                                            placeholder="D3/D4/S1/S2" name="bachelor_degree"
                                            value="{{ old('bachelor_degree') }}">
                                    </div>
                                    <div class="col-4 mb-3">
                                        <label>Number Phone Relation <span style="color: red">*</span></label>
                                        <div class="input-group flex-nowrap">
                                            <span class="input-group-text" id="addon-wrapping">+62</span>
                                            <input type="text" class="form-control" id="add_relation_no"
                                                placeholder="83109876709" name="relation_no"
                                                value="{{ old('relation_no') }}" aria-label="relation_no"
                                                aria-describedby="addon-wrapping" maxlength="14"
                                                oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
                                        </div>
                                    </div>
                                    <div class="col-4 mb-3">
                                        <label>Name Relation <span style="color: red">*</span></label>
                                        <input type="text" class="form-control" id="add_employee_relation_name"
                                            placeholder="Name Relation" name="relation_name"
                                            value="{{ old('relation_name') }}" required>
                                    </div>
                                    <div class="col-4 mb-3">
                                        <label>Relation <span style="color: red">*</span></label>
                                        <input type="text" class="form-control" id="add_employee_relation"
                                            placeholder="Relation" name="relation" value="{{ old('relation') }}"
                                            required>
                                    </div>

                                    <div class="col-6 mb-3">
                                        <label>Marital Status <span style="color: red">*</span></label>
                                        <select id="marital_statuses" class="form-control selectpicker"
                                            aria-label="Default select example" name="marital_statuses_uid"
                                            data-live-search="true" required>
                                            <option value=""> this select marital status</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card mb-4">
                            <div class="card-header">Personal Account</div>
                            <div class="card-body">
                                @csrf
                                <div class="row">
                                    <div class="col-12 mb-3">
                                        <label>Email <span style="color: red">*</span></label>
                                        <input type="email" class="form-control" id="add_employee_email"
                                            placeholder="Email" name="email" value="{{ old('email') }}"
                                            maxlength="255" required>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Password<span style="color: red">*</span></label>
                                        <input type="password" class="form-control" id="password"
                                            placeholder="Password" name="password" value="{{ old('passswaord') }}"
                                            required>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Confirmation Password<span style="color: red">*</span></label>
                                        <input type="password" class="form-control" id="confirm_password"
                                            placeholder="Confirmation Password" name="password_confirmation"
                                            value="{{ old('password_confirmation') }}" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mb-4">
                            <div class="card-header">Data Employee</div>
                            <div class="card-body">
                                @csrf
                                <div class="row">
                                    <div class="col-6 mb-3">
                                        <label>Location Absent</label>
                                        <select id="add_location_attendance" class="form-control selectpicker"
                                            aria-label="Default select example" name="location_attendance_uid"
                                            data-live-search="true">
                                            <option value="">Open this select location attendance</option>
                                        </select>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Location <span style="color: red">*</span></label>
                                        <select id="add_location" class="form-control selectpicker"
                                            aria-label="Default select example" name="location_uid"
                                            data-live-search="true" required>
                                            <option value="">Open this select location</option>
                                        </select>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Division</label>
                                        <select id="add_division" class="form-control selectpicker"
                                            aria-label="Default select example" name="division_uid"
                                            data-live-search="true">
                                            <option value="">Open this select Division</option>
                                        </select>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Department</label>
                                        <select id="add_department" class="form-control selectpicker"
                                            aria-label="Default select example" name="department_uid"
                                            data-live-search="true">
                                            <option value="">Open this select Department</option>
                                        </select>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Sub Department</label>
                                        <select id="add_sub_department" class="form-control selectpicker"
                                            aria-label="Default select example" name="sub_department_uid"
                                            data-live-search="true">
                                            <option value="">Open this select sub department</option>
                                        </select>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Position <span style="color: red">*</span></label>
                                        <select id="add_position" class="form-control selectpicker"
                                            aria-label="Default select example" name="role_uid" data-live-search="true">
                                            <option value="">Open this select role</option>
                                        </select>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Employee Status <span style="color: red">*</span></label>
                                        <select id="add_employee_status" class="form-control selectpicker"
                                            aria-label="Default select example" name="employee_statuses_uid"
                                            data-live-search="true" required>
                                            <option value="">Open this select employee status</option>
                                        </select>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Join Date <span style="color: red">*</span></label>
                                        <input type="date" class="form-control" id="add_employee_join_date"
                                            placeholder="Join Date" name="join_date" value="{{ old('Join_date') }}"
                                            required>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Out Date</label>
                                        <input type="date" class="form-control" id="add_employee_out_date"
                                            placeholder="Out Date" name="out_date" value="{{ old('out_date') }}">
                                    </div>

                                    <div class="col-6 mb-3">
                                        <label>Type Payroll <span style="color: red">*</span></label>
                                        <select class="form-control selectpicker" id="employee_type_payroll"
                                            name="type_payroll" required>
                                            <option value="" selected>Select type payroll</option>

                                            <option value="net">Net</option>
                                            <option value="brutto">Brutto</option>
                                            <option value="sewa">Sewa STR / SIP</option>
                                            <option value="harian">Harian</option>
                                        </select>
                                    </div>

                                    <div class="col-6 mb-3">
                                        <label>Period Employ</label>
                                        <input type="text" class="form-control" id="add_score_period_employ"
                                            placeholder="Ex: 1 years = 12 " name="period_employee"
                                            value="{{ old('period_employee') }}">
                                    </div>
                                    <div class="col-6 mb-3">
                                        <label>Shift <span style="color: red">*</span></label>
                                        <select class="form-control selectpicker" id="add_employee_shift" name="is_shift"
                                            required>
                                            <option value="" selected>Choose...</option>
                                            <option value="Shift">Shift</option>
                                            <option value="NonShift">Non Shift</option>
                                        </select>
                                    </div>

                                    <div class="col-6 mb-3">
                                        <label>Absens ID<span style="color: red">*</span></label>
                                        <input type="text" class="form-control" id="add_absens_id"
                                            placeholder="Absen" name="absens_id" value="{{ old('working_days') }}">
                                    </div>

                                    <div class="col-6 mb-3">
                                        <label>Type Absent <span style="color: red">*</span></label>
                                        <select class="form-control selectpicker" id="add_type_absent" name="type_absent"
                                            required>
                                            <option value="">Choose...</option>
                                            <option value="absent" selected>Absent</option>
                                            <option value="no-absent">No Absent</option>
                                        </select>
                                    </div>

                                    <div class="col-6 mb-3">
                                        <label>Temporary User</label>
                                        <select class="form-control selectpicker" id="add_temporary_user"
                                            name="temporary_user" required>
                                            <option value="">Choose...</option>
                                            <option value="yes">Yes</option>
                                            <option value="no" selected>No</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="card mb-4">
                            <div class="card-header">Leave Allowance</div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-6 mb-3">
                                        <label>Leave Allowance</label>
                                        <input type="text" class="form-control" id="leave_allowance"
                                            name="leave_allowance" value="{{ old('leave_allowance') }}">
                                    </div>

                                    <div class="col-6 mb-3">
                                        <label>Expired Leave Allowance</label>
                                        <input type="date" class="form-control" id="expired_leave_allowance"
                                            name="expired_leave_allowance" value="{{ old('expired_leave_allowance') }}">

                                        <div class="mt-3">
                                            <label for="check_expired"><input type="checkbox" name=""
                                                    id="check_expired"> Same as the joining date</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if (auth()->user()->roles->accessLevel->name === 'HR-Manager')
                            <div class="card mb-4">
                                <div class="card-header">Payroll Employee</div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6 mb-3">
                                            <label>Salary <span style="color: red">*</span></label>
                                            <div class="input-group ">
                                                <span class="input-group-text">Rp.</span>
                                                <input type="text" class="form-control" name="employee_salary"
                                                    id="employee_salary">
                                            </div>
                                        </div>

                                        <div class="col-6 mb-3">
                                            <label>Status Payroll <span style="color: red">*</span></label>
                                            <select id="add_status_payroll_location" class="form-control selectpicker"
                                                id="employee_status_payroll" name="status_payroll"
                                                data-live-search="true" required>
                                                <option value="" selected>Choose...</option>
                                            </select>
                                        </div>

                                        <div class="col-6 mb-5">
                                            <label>Temporary Salary</label>
                                            <div class="input-group ">
                                                <span class="input-group-text">Rp.</span>
                                                <input type="number" class="form-control"
                                                    name="temporary_employee_salary" id="temporary_employee_salary">
                                            </div>
                                        </div>

                                        <div class="col-6 mb-5">
                                            <label>Period of Temporary Salary</label>
                                            <div class="input-group ">
                                                <input type="date" class="form-control"
                                                    name="periode_temporary_employee_salary"
                                                    id="periode_temporary_employee_salary">
                                            </div>
                                        </div>

                                        <div class="col-6 mb-3">
                                            <label>Positional Allowance</label>
                                            <div class="input-group ">
                                                <span class="input-group-text">Rp.</span>
                                                <input type="number" class="form-control" name="positional_allowance"
                                                    id="positional_allowance">
                                            </div>
                                        </div>

                                        <div class="col-6 mb-3">
                                            <label>Allowance for Meal & Transport</label>
                                            <div class="input-group ">
                                                <span class="input-group-text">Rp.</span>
                                                <input type="number" class="form-control"
                                                    name="allowance_meal_transport" id="allowance_meal_transport">
                                            </div>
                                        </div>
                                        <div class="col-6 mb-5">
                                            <label>Policy</label>
                                            <div class="input-group ">
                                                <span class="input-group-text">Rp.</span>
                                                <input type="number" class="form-control" name="policy"
                                                    id="policy">
                                            </div>
                                        </div>
                                        <div class="col-6 mb-5">
                                            <label>Etc Allowance</label>
                                            <div class="input-group ">
                                                <span class="input-group-text">Rp.</span>
                                                <input type="number" class="form-control" name="etc_allowance"
                                                    id="etc_allowance">
                                            </div>
                                        </div>

                                        <div class="col-6 mb-3">
                                            <label>PPH 21</label>
                                            <div class="input-group ">
                                                <span class="input-group-text">Rp.</span>
                                                <input type="number" class="form-control" name="pph21"
                                                    id="pph21">
                                            </div>
                                        </div>

                                        <div class="col-6 mb-3">
                                            <label>Loan</label>
                                            <div class="input-group ">
                                                <span class="input-group-text">Rp.</span>
                                                <input type="number" class="form-control" name="loan"
                                                    id="loan">
                                            </div>
                                        </div>

                                        <div class="col-6 mb-3">
                                            <label>BPJS Kesehatan</label>
                                            <div class="input-group ">
                                                <span class="input-group-text">Rp.</span>
                                                <input type="number" class="form-control" name="bpjskes"
                                                    id="bpjskes">
                                            </div>
                                        </div>

                                        <div class="col-6 mb-3">
                                            <label>BPJS Ketenagakerjaan</label>
                                            <div class="input-group ">
                                                <span class="input-group-text">Rp.</span>
                                                <input type="number" class="form-control" name="bpjsket"
                                                    id="bpjsket">
                                            </div>
                                        </div>

                                        <div class="col-6 mb-5">
                                            <label>BPJS Pensiun</label>
                                            <div class="input-group ">
                                                <span class="input-group-text">Rp.</span>
                                                <input type="number" class="form-control" name="bpjspen"
                                                    id="bpjspen">
                                            </div>
                                        </div>
                                        <div class="col-6 mb-5">
                                            <label for="">Etc Deduction</label>
                                            <div class="input-group">
                                                <span class="input-group-text">Rp.</span>
                                                <input type="number" name="etc_deduction" id="edit_etc_deduction"
                                                    class="form-control">
                                            </div>
                                        </div>

                                        <div class="col-6 mb-3">
                                            <label>Payment Method <span style="color: red">*</span></label>
                                            <select class="form-control selectpicker" id="payment_method"
                                                name="payment_method" required>
                                                <option selected value="">Choose...</option>
                                                <option value="cash">Cash</option>
                                                <option value="transfer">Transfer</option>
                                            </select>
                                        </div>

                                        <div class="col-6 mb-3">
                                            <label>Payment Bank</label>
                                            <select class="form-control" id="payment_bank" name="payment_bank">
                                                <option selected value="">Choose...</option>
                                                <option value="mandiri">Mandiri</option>
                                                <option value="bca">Bca</option>
                                            </select>
                                        </div>
                                        <div class="col-6 mb-3">
                                            <label>Bank Account Number</label>
                                            <div class="input-group ">
                                                <input type="text" class="form-control" name="bank_account_number"
                                                    id="bank_account_number" placeholder="123xx xxxxx xxxxx">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="card mb-4">
                            <div class="card-header">Organizational Structure</div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="form-group">
                                        <label for="reff_user_uid">Employee Superiors</label>
                                        <select id="add_reff_user_for_structure_org" class="form-control selectpicker"
                                            name="reff_user_uid" data-live-search="true">
                                            <option value="">
                                                Employee Superiors User</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </main>

    <script>
        function uploadImage() {
                var input = document.getElementById('imageUpload');
                if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    document.getElementById('profileImage').src = e.target.result;
                };

                reader.readAsDataURL(input.files[0]);
            }
        }

        $(document).ready(function() {
            function validateForm() {
                const requiredInputFilled = $('input[required]').toArray().every(function(input) {
                    return $(input).val().trim() !== '';
                });

                const selectIsValid = $('.selectpicker[required]').toArray().every(function(select) {
                    return $(select).val() !== '';
                });

                return requiredInputFilled && selectIsValid;
            }

            $('input[required], .selectpicker').on('input change', function() {
                $('#saveChangesButton').prop('disabled', !validateForm());
            });

            // Trigger the input event on page load to initialize the button state
            $('input[required], .selectpicker').trigger('input');
        });


   
    </script>

    <script src="/js/functions/maritalstatuses.js"></script>
    <script src="/js/functions/locations.js"></script>
    <script src="/js/functions/divisions.js"></script>
    <script src="/js/functions/departments.js"></script>
    <script src="/js/functions/sub_department.js"></script>
    <script src="/js/functions/roles.js"></script>
    <script src="/js/functions/employeestatuses.js"></script>
    <script src="/js/functions/structure_org_employee.js"></script>
    <script src="/js/functions/LocationAttendances.js"></script>
    <script src="/js/employees/_init.js"></script>
    <script src="/js/employees/add.js"></script>
@endsection